/*************************************************************************/
/* MODERN DC.JS                                                         */
/* Load AFTER official dc.css                                           */
/*************************************************************************/

:root {
    /* Surface */
    --dc-background: transparent;
    --dc-surface: #ffffff;
    /* Text */
    --dc-text: #4b5968;
    --dc-muted: #788696;
    --dc-title: #263746;
    /* Lines */
    --dc-axis: #d5dde5;
    --dc-grid: #edf1f4;
    --dc-border: #e3e8ef;
    /* Interaction */
    --dc-hover-opacity: .82;
    --dc-deselected-opacity: .22;
    --dc-selected-stroke: #ffffff;
    /* Accent */
    --dc-accent: var(--panel-accent, #b18849);
    --dc-accent-soft: rgba(177, 136, 73, .14);
    /* Brush */
    --dc-brush: var(--dc-accent);
    --dc-brush-opacity: .12;
    /* Radius */
    --dc-bar-radius: 3px;
}


/*************************************************************************/
/* CONTAINER                                                             */
/*************************************************************************/

.dc-chart {
    position: relative;
    float: none;
    width: 100%;
    min-width: 0;
    color: var(--dc-text);
    background-color: var(--dc-background);
    font-family: inherit;
}


    /*************************************************************************/
    /* SVG                                                                   */
    /*************************************************************************/

    .dc-chart svg {
        display: block;
        max-width: 100%;
        overflow: visible;
        font-family: inherit;
    }


    /*************************************************************************/
    /* AXES                                                                  */
    /*************************************************************************/

    .dc-chart .axis path,
    .dc-chart .axis line {
        fill: none;
        stroke: var(--dc-axis);
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .dc-chart .axis text,
    .dc-chart g.axis text {
        fill: var(--dc-muted);
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        text-shadow: none;
    }


    /*************************************************************************/
    /* GRID                                                                  */
    /*************************************************************************/

    .dc-chart .grid-line,
    .dc-chart .axis .grid-line,
    .dc-chart .grid-line line,
    .dc-chart .axis .grid-line line {
        fill: none;
        stroke: var(--dc-grid);
        stroke-width: 1px;
        opacity: 1;
        shape-rendering: crispEdges;
    }


    /*************************************************************************/
    /* BARS                                                                  */
    /*************************************************************************/

    .dc-chart rect.bar {
        stroke: none;
        cursor: pointer;
        rx: var(--dc-bar-radius);
        ry: var(--dc-bar-radius);
        transition: opacity .15s ease, filter .15s ease;
    }

        .dc-chart rect.bar:hover {
            fill-opacity: var(--dc-hover-opacity);
        }


    /*************************************************************************/
    /* LINES                                                                 */
    /*************************************************************************/

    .dc-chart path.line {
        fill: none;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    /*************************************************************************/
    /* AREA                                                                  */
    /*************************************************************************/

    .dc-chart path.area {
        fill-opacity: .16;
        stroke: none;
    }


    /*************************************************************************/
    /* DOTS                                                                  */
    /*************************************************************************/

    .dc-chart circle.dot {
        stroke: var(--dc-surface);
        stroke-width: 1.5px;
        transition: r .15s ease, opacity .15s ease;
    }


    /*************************************************************************/
    /* ROW CHART                                                             */
    /*************************************************************************/

    .dc-chart g.row rect {
        fill-opacity: .88;
        stroke: none;
        cursor: pointer;
        transition: fill-opacity .15s ease;
    }

        .dc-chart g.row rect:hover {
            fill-opacity: .72;
        }

    .dc-chart g.row text {
        fill: var(--dc-text);
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
    }


    /*************************************************************************/
    /* PIE / DONUT                                                           */
    /*************************************************************************/

    .dc-chart .pie-slice {
        fill: var(--dc-text);
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
    }

        .dc-chart .pie-slice.external {
            fill: var(--dc-text);
        }

        .dc-chart .pie-slice:hover,
        .dc-chart .pie-slice.highlight {
            fill-opacity: .82;
        }

    .dc-chart .pie-path {
        fill: none;
        stroke: var(--dc-muted);
        stroke-width: 1px;
        opacity: .45;
    }


    /*************************************************************************/
    /* BUBBLES                                                               */
    /*************************************************************************/

    .dc-chart .bubble {
        fill-opacity: .72;
        stroke: var(--dc-surface);
        stroke-width: 1px;
        transition: fill-opacity .15s ease, stroke-width .15s ease;
    }

        .dc-chart .bubble:hover {
            fill-opacity: .9;
            stroke-width: 2px;
        }


    /*************************************************************************/
    /* SELECTION                                                             */
    /*************************************************************************/

    .dc-chart .selected path,
    .dc-chart .selected circle {
        fill-opacity: 1;
        stroke: var(--dc-selected-stroke);
        stroke-width: 2px;
    }

    .dc-chart .deselected path,
    .dc-chart .deselected circle,
    .dc-chart rect.deselected {
        fill-opacity: var(--dc-deselected-opacity);
        stroke: none;
    }

    .dc-chart .fadeout {
        fill-opacity: var(--dc-deselected-opacity);
        stroke-opacity: var(--dc-deselected-opacity);
    }


    /*************************************************************************/
    /* HIGHLIGHT                                                             */
    /*************************************************************************/

    .dc-chart path.highlight,
    .dc-chart .highlight {
        fill-opacity: 1;
        stroke-opacity: 1;
    }

    .dc-chart path.highlight {
        stroke-width: 2.5px;
    }


    /*************************************************************************/
    /* BRUSH                                                                 */
    /*************************************************************************/

    .dc-chart .brush rect.extent {
        fill: var(--dc-brush);
        fill-opacity: var(--dc-brush-opacity);
        stroke: var(--dc-brush);
        stroke-opacity: .35;
    }

    .dc-chart .brush .resize path {
        fill: var(--dc-surface);
        stroke: var(--dc-muted);
        stroke-width: 1px;
    }


    /*************************************************************************/
    /* TOOLTIP GUIDES                                                        */
    /*************************************************************************/

    .dc-chart g.dc-tooltip path {
        fill: none;
        stroke: var(--dc-muted);
        stroke-width: 1px;
        stroke-opacity: .6;
        stroke-dasharray: 3 3;
    }


    /*************************************************************************/
    /* LEGEND                                                                */
    /*************************************************************************/

    .dc-chart .dc-legend,
    .dc-legend {
        font-family: inherit;
        font-size: 10px;
    }

        .dc-chart .dc-legend text,
        .dc-legend text {
            fill: var(--dc-text);
            font-family: inherit;
            font-weight: 500;
        }

        .dc-legend .dc-legend-item {
            cursor: pointer;
        }

            .dc-legend .dc-legend-item text {
                opacity: .8;
                transition: opacity .15s ease;
            }

            .dc-legend .dc-legend-item:hover text {
                opacity: 1;
            }


    /*************************************************************************/
    /* HEATMAP                                                               */
    /*************************************************************************/

    .dc-chart .heatmap .box-group rect {
        stroke: var(--dc-surface);
        stroke-width: 1px;
    }

    .dc-chart .heatmap .box-group.deselected rect {
        fill-opacity: var(--dc-deselected-opacity);
        stroke: var(--dc-surface);
    }

    .dc-chart .heatmap g.axis text {
        pointer-events: all;
        cursor: pointer;
    }


    /*************************************************************************/
    /* BOX PLOT                                                              */
    /*************************************************************************/

    .dc-chart .box text {
        fill: var(--dc-muted);
        font-family: inherit;
        font-size: 10px;
    }

    .dc-chart .box rect,
    .dc-chart .box line,
    .dc-chart .box circle {
        stroke: var(--dc-muted);
        stroke-width: 1px;
    }

    .dc-chart .box line,
    .dc-chart .box circle {
        fill: var(--dc-surface);
    }

    .dc-chart .box .center {
        stroke-dasharray: 3 3;
    }

    .dc-chart .box .outlier {
        fill: var(--dc-surface);
        stroke: var(--dc-muted);
    }


    /*************************************************************************/
    /* FILTER / RESET                                                        */
    /*************************************************************************/

    .dc-chart .reset,
    .dc-chart .filter {
        color: var(--dc-accent);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

        .dc-chart .reset:hover,
        .dc-chart .filter:hover {
            text-decoration: underline;
        }


/*************************************************************************/
/* DATA COUNT                                                            */
/*************************************************************************/

.dc-data-count {
    float: none;
    margin: 8px 0;
    color: var(--dc-muted);
    font-size: 11px;
}

    .dc-data-count .filter-count,
    .dc-data-count .total-count {
        color: var(--dc-title);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }


/*************************************************************************/
/* TEXT FILTER                                                           */
/*************************************************************************/

.dc-text-filter-input {
    min-height: 34px;
    padding: 6px 10px;
    color: var(--dc-text);
    background-color: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: 6px;
    outline: 0;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .dc-text-filter-input:focus {
        border-color: var(--dc-accent);
        box-shadow: 0 0 0 2px var(--dc-accent-soft);
    }


/*************************************************************************/
/* NUMBER DISPLAY                                                        */
/*************************************************************************/

.dc-chart .number-display,
.dc-hard .number-display {
    float: none;
    color: var(--dc-title);
/*    font-size: 1.35em;
*/    font-weight: 650;
    font-variant-numeric: tabular-nums;
}


/*************************************************************************/
/* WHITE AXIS - LEGACY SUPPORT                                           */
/*************************************************************************/

.whiteaxis .axis text {
    fill: #ffffff !important;
}


/*************************************************************************/
/* RESPONSIVE                                                            */
/*************************************************************************/

@media (max-width: 767px) {

    .dc-chart .axis text {
        font-size: 9px;
    }

    .dc-chart g.row text {
        font-size: 10px;
    }
}


/*************************************************************************/
/* ACTIVITY CHARTS                                                       */
/* Specific additions for activity.charts-6.x                           */
/*************************************************************************/

/* Activity widgets reuse the global dc.js theme above.
   Only component-specific rules live here. */

.dc-modern-bars rect.bar {
    transition: opacity .12s ease, filter .12s ease;
}

    .dc-modern-bars rect.bar:hover,
    .dc-modern-bars rect.bar.selected {
        fill-opacity: 1;
    }

    .dc-modern-bars rect.bar.deselected {
        fill-opacity: var(--dc-deselected-opacity);
    }

.dc-modern-rows g.row rect {
    transition: fill-opacity .12s ease;
}

.dc-modern-rows g.row:hover rect {
    fill-opacity: 1;
}

.dc-modern-rows g.row.deselected rect {
    fill-opacity: var(--dc-deselected-opacity);
}

.dc-modern-pie g.pie-slice path {
    stroke: var(--dc-surface);
    stroke-width: 2px;
    transition: fill-opacity .12s ease;
}

.dc-modern-pie g.pie-slice:hover path {
    fill-opacity: var(--dc-hover-opacity);
}


/*************************************************************************/
/* ACTIVITY DATA TABLE                                                   */
/*************************************************************************/

.activity-table-modern {
    width: 100%;
    margin-bottom: 0;
    color: var(--dc-text);
    background: var(--dc-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

    .activity-table-modern thead th {
        padding: .65rem .75rem;
        color: var(--dc-muted);
        background: #f7f9fb;
        border-top: 0;
        border-bottom: 1px solid var(--dc-border);
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .activity-table-modern tbody td {
        padding: .55rem .75rem;
        color: var(--dc-text);
        background: var(--dc-surface);
        border-top: 1px solid var(--dc-grid);
        vertical-align: middle;
        font-size: 12px;
    }

    .activity-table-modern tbody tr:first-child td {
        border-top: 0;
    }

    .activity-table-modern tbody tr:hover td {
        background: #fafbfd;
    }

    .activity-table-modern .img-td {
        width: 26px;
        height: 26px;
        object-fit: contain;
        border-radius: 4px;
    }

    .activity-table-modern a {
        color: var(--dc-title);
        text-decoration: none;
    }

        .activity-table-modern a:hover {
            color: var(--dc-accent);
            text-decoration: none;
        }

    .activity-table-modern .btn {
        line-height: 1.1;
    }

    .activity-table-modern .text-success {
        color: #63a985 !important;
    }

    .activity-table-modern .text-warning {
        color: #d6a64f !important;
    }

    .activity-table-modern .text-danger {
        color: #c96b62 !important;
    }


/*************************************************************************/
/* ACTIVITY TABLE PAGINATION                                             */
/*************************************************************************/

.activity-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: var(--dc-muted);
    font-size: 11px;
}

    .activity-table-pager .table-size,
    .activity-table-pager .table-begin,
    .activity-table-pager .table-end {
        color: var(--dc-title);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }


/*************************************************************************/
/* ACTIVITY RESPONSIVE                                                   */
/*************************************************************************/

@media (max-width: 767px) {

    .activity-table-modern thead th,
    .activity-table-modern tbody td {
        padding: .45rem .55rem;
        font-size: 11px;
    }

    .activity-table-modern .img-td {
        width: 22px;
        height: 22px;
    }
}