/* body {
    background-color: #f8f8fa;
    color: #000000;
} */
.card-bg { background-color: #ffffff !important; }
.bg-pink { background-color: #1e293b !important; }
.card { border-radius: 15px; overflow: hidden;}
.shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.list-group-item { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.chart-container { height: 250px; }

.bar {
    width: 2px;
    background-color: #1c551a;
    border-radius: 3px;
    animation: bounce 1.2s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.4);
    }
}

    .animated-line-chart {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .animated-line-chart svg {
        width: 80%;
        height: 100%;
    }
    
    .chart-line {
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: drawLine 2.5s ease-in-out infinite alternate;
    }
    
    @keyframes drawLine {
        0% {
            stroke-dashoffset: 300;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    .tag-name {
        font-size: 10px;
        font-weight: 400;
        color: #123f09;
        background-color: #46f55c;
        padding: 0px 3px 0px 2px;
        border-radius: 5px;
        margin-left: 3px;
    }
    .offcanvas-body-css {
        width: 250px !important;
        background-color: #181822;
        color: #fff ;
    }
    .list-group-item {
        background-color: transparent;
        border: none;
    }
    .list-group-item a {
        color: white !important;
    }
    .btn-close-white {
        filter: invert(1);
    }
   

        /* Mobile View (Max width 768px) */
@media (max-width: 768px) {
    #agentsTable_wrapper .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center; /* Vertically center both columns */
    }
    
    #agentsTable_wrapper .row > .col-sm-12.col-md-6 {
        width: 50%;
        padding: 0 5px;
        box-sizing: border-box;
        display: flex;
        align-items: center; /* Center the content vertically */
        justify-content: center; /* Center the content horizontally */
    }
    
    /* Fix label inside each side */
    #agentsTable_wrapper #agentsTable_length label,
    #agentsTable_wrapper #agentsTable_filter label {
        font-size: 12px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
        justify-content: center;
    }
    
    /* Dropdown and input styles same height */
    #agentsTable_wrapper select[name="agentsTable_length"],
    #agentsTable_wrapper #agentsTable_filter input {
        font-size: 12px;
        height: 32px;
        padding: 2px 5px;
        line-height: 1.5;
        box-sizing: border-box;
    }
    
    /* Fix dropdown width */
    #agentsTable_wrapper select[name="agentsTable_length"] {
        min-width: 70px;
        width: auto;
    }
    
    /* Fix search input width */
    #agentsTable_wrapper #agentsTable_filter input {
        min-width: 100px;
    }
    }
    @media screen and (max-width: 640px) {
        .dataTables_wrapper .dataTables_filter {
            margin-top: 0em !important;
        }
    }
    
.mutedBtn {
    opacity: 0.5;        /* Look half visible */
    pointer-events: auto; /* Allow click */
}
.activeBtn {
    opacity: 1;           /* Fully visible when active */
}
.header-icon {
    /* background-color: #e9e9e9; */
    padding: 4px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
        /* width: 32px;
        height: 32px; */
}
.referral-box .btn {
    height: 100%;
    border-radius: 0; /* Remove corner rounding */
}

.referral-box {
    height: 40px;
}

.referral-box input {
    border: none;
    outline: none;
    box-shadow: none;
}