body {
    /*display: flex;*/
    /*  background: #f4f4f4;*/
}
.row.mainBreadcrumb{
    display: none !important;
}
.content {
    /* flex: 1;
     padding: 20px;*/
}

.dashboardTile {
}

/*Tiles*/

/*All Joining*/
.dashboardTile .card .title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.dashboardTile .subtitle {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.card-joinings .chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 50px;
    margin-bottom: 10px;
}

.card-joinings .bar {
    width: 10px;
    border-radius: 5px !important;
    background: linear-gradient(to top, #ffffff, #673AB7);
}

.card-joinings .bar:nth-child(1) {
    height: 30px;
}

.card-joinings .bar:nth-child(2) {
    height: 20px;
}

.card-joinings .bar:nth-child(3) {
    height: 40px;
}

.card-joinings .bar:nth-child(4) {
    height: 35px;
}

.card-joinings .bar:nth-child(5) {
    height: 50px;
}

.card-joinings .bar:nth-child(6) {
    height: 25px;
}

.card-joinings .bar:nth-child(7) {
    height: 45px;
}

.card-joinings .count {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.card-joinings .growth {
    font-size: 12px;
    color: #008305;
    margin-top: 5px;
    font-weight: 600 !important;
}
.card.card-sales .growth, .card.card-sales .decline  {
    position: absolute;
    bottom: 35px;
}
.growth {
    font-size: 12px;
    color: #008305;
    margin-top: 5px;
    font-weight: 600 !important;
}
.decline {
    color: #eb4444;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 600;
}
/* Business Wallet */

.card-sales {
    width: 180px;
    background: linear-gradient(to bottom, #E0F2F1, #ffffff);
    border-radius: 12px !important;
    padding: 15px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.dashboardTile .card.card-sales {
    position: relative;
}

.card-sales .title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.card-sales .subtitle {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.card-sales .chart-container {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    position: absolute;
    left: 0px;
    right: 0px;
}

.card-sales .count {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.card-sales .decline {
    font-size: 12px;
    color: #40a644;
    margin-top: 5px;
}


.dashboardTile .card {
    width: 100%;
    min-height: 210px;
    padding: 15px;
    border-radius: 12px !important;;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    background: white;
    border: 0px;
}

.dashboardTile .card-title {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 600;
    margin-top: 5px;
}

.dashboardTile .card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.dashboardTile .percentage {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 5px !important;
    display: inline-block;
}

.dashboardTile .positive {
    color: #18a558;
    background: #eafaf1;
}

.leftBlock .positive {
    color: #18a558;
    background: #eafaf1;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 5px !important;
    display: inline-block;
}

.dashboardTile .negative {
    color: #d9534f;
    background: #fbe8e8;
}

.leftBlock .negative {
    color: #d9534f;
    background: #fbe8e8;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 5px !important;
    display: inline-block;
}

/* Card Colors */
.card-joinings {
    background: #cabaf1 !important;
}

.card-sales {
    background: #c4e9e3 !important;
}

.card-payout {
    background: white;
}

.card-ewallet {
    background: white;
}

/* Mini Icons */
.card-icon {
    /*width: 20px;
    height: 20px;*/
    /*background: #f5f5f5;
    display: inline-block;
    border-radius: 5px;
    padding: 5px;*/
}
.card-icon img {
    width: 34px;
}
.business-card {
    width: 100%;
    float: left;
    /* width: 350px;*/
    background: white;
    border-radius: 12px !important;;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.business-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.business-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.business-card .chart-container {
    width: 100%;
    height: 200px;
}

.business-card .stats-container {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.business-card .stats-box {
    width: 45%;
    padding: 10px;
    border-radius: 8px !important;
    text-align: center;
}

.business-card .sales {
    background: #FFE6E9;
    color: #E57373;
}

.business-card .expenses {
    background: #c1f1d2;
    color: #24a83b;
}

.business-card .stats-box h4 {
    margin: 5px 0;
    font-size: 16px;
    font-weight: bold;
}

.business-card .stats-box span {
    font-size: 12px;
    color: #666;
}

.world-map-card {
    margin: 15px 0px 0px;
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 12px !important;;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    min-height: 512px;
}

.world-map-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.world-map-card p {
    font-size: 14px;
    color: #666;
}

.world-map-card .map-container {
    width: 100%;
    height: 200px;
}

.world-map-card .progress-container {
    margin-top: 15px;
}

.world-map-card .progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.world-map-card .progress-bar {
    width: 75%;
    height: 6px;
    background: #ddd;
    border-radius: 4px !important;
    position: relative;
}

.world-map-card .progress-fill {
    height: 100%;
    border-radius: 4px !important;
    position: absolute;
    left: 0;
    top: 0;
}

.blue {
    background: #4A90E2;
}

.green {
    background: #26A69A;
}

.red {
    background: #EF5350;
}

.purple {
    background: #8E44AD;
}

.business-Widget {
    margin: 15px 0px 0px;
    width: 100%;
    background: white;
    border-radius: 12px !important;;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: left;
}

.business-Widget h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
}

.business-Widget p {
    font-size: 12px;
    color: gray;
    margin-bottom: 15px;
}

.balance-amount {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.balance-change {
    font-size: 12px;
    color: #18a558;
    background: #eafaf1;
    padding: 4px 10px;
    border-radius: 5px !important;
    display: inline-block;
}

.chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
}

.chart-bar {
    width: 20px;
    border-radius: 5px;
    background: #c1f1d2;
    transition: 0.3s;
}

.chart-bar:hover {
    background: #18a558;
}

.chart-bar.active {
    background: #18a558;
}
.chart-container-commission {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
}
.chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: gray;
}

.referral-card {
    width: 100%;
    margin: 15px 0px 0px;
    background: white;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.referral-card .profile-img {
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    margin-bottom: 10px;
}

.referral-card h3 {
    margin: 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.referral-card p {
    font-size: 13px;
    color: #777;
    margin: 0 0 15px;
}

.referral-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f3f3;
    padding: 0px 0px 0px 10px;
    border-radius: 8px !important;
}

.referral-box input {
    border: none;
    background: transparent;
    font-size: 12px;
    width: 100%;
    color: #555;
    outline: none;
    height: 45px;
    padding-right: 5px;
}

.copy-btn {
    background: #03A9F4;
    color: white;
    font-size: 13px;
    border: none;
    padding: 8px 12px;
    border-radius: 6px !important;
    cursor: pointer;
    height: 45px;
}

.copy-btn:hover {
    background: #0692d2;
}

.social-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.social-links img.share-icon {
    width: 22px;
}
.social-links a {
    font-size: 20px;
    color: #444747;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #6A5ACD;
}


.recent-card {
    width: 100%;
    margin: 15px 0px 0px;
    background: white;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 325px;
    max-height: 325px;
}

.recent-card h3 {
    margin: 15px 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-left: 10px;
}

.recent-card .timeline {
    position: relative;
    /*padding-left: 20px;*/
    list-style: none;
    margin: 0px !important;
    margin-bottom: 0px !important;
}

.recent-card .timeline::before {
    content: "";
    position: absolute;
    /*left: 95px;*/
    left:75px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #e3e3e3;
    margin: 0px;
}

.recent-card .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px !important;
    position: relative;
}

.recent-card .timeline-item:last-child {
    margin-bottom: 0;
}

.recent-card .timeline-time {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

.recent-card .timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
    background-color: #158199;
    margin-top: 4px;
}

.purple {
    background: #6A5ACD;
}

.yellow {
    background: #FFC107;
}

.timeline-content {
    font-size: 12px;
    color: #615f5f;
}

.timeline-content strong {
    font-weight: bold;
    font-size: 14px;
    color: #222;
}

.timeline-content a {
    color: #6A5ACD;
    text-decoration: none;
}

.timeline-content a:hover {
    text-decoration: underline;
}

/**** TOP EARNERS card****/
.row.top-earners-card {
    min-height: 610px;
    max-height: 610px;
}

.row.top-earners-card {
    display: flex;
    margin-top: 15px;
    margin-left: 0px;
    margin-bottom: 15px;
    /* margin: 10px 0px; */
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
    margin-right: 0px;
}

.top-earners-card .left {
    flex: 2;
    padding: 30px;
    border-right: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
}

.top-earners-card .right {
    flex: 1.2;
    padding: 20px 20px;
}

.top-earners-card h2 {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: capitalize;
}

.top-earners-card .donut-chart {
    width: 240px;
    height: 240px;
    margin: 0 auto;
}

.top-earners-card .earnings-breakdown {
    margin-top: 0px;
    font-size: 14px;
    max-height: 90px;
    overflow-x: auto;
    padding-right: 5px;
}
.top-earners-card .earnings-breakdown::-webkit-scrollbar {
    width: 5px;
    background-color:#ddd
}
.top-earners-card .earnings-breakdown div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.top-earners-card .total-earned {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    /* display: flex;*/
    justify-content: space-between;
    align-items: center;
}

.top-earners-card .total-earned span {
    color: #10b981;
}

.top-earners-card .total-earned div {
    display: flex;
    justify-content: space-between;
}

.top-earners-card .total-earned button {
    /* padding: 6px 14px;
     background-color: #f3f4f6;
     border: none;
     border-radius: 8px !important;
     font-size: 13px;
     cursor: pointer;*/
}

.top-earners-card .top-earners h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: capitalize !important;
}

.top-earners-card .top-earner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    padding: 12px 0px;
    /* border-radius: 8px !important; */
    cursor: pointer;
    transition: background 0.3s ease;
    border-bottom: solid 1px #eaeaea;
    background-color: #ffff;
}

.top-earners-card .top-earner.selected {
    background-color: #efefef;
    /*border-radius: 12px !important;*/
}

.top-earners-card .top-earner:hover {
    background: #f9fafb;
}

.top-earners-card .top-earner.active {
    background-color: #e6f1ff;
    border-bottom: solid 2px #94b7e5;
}

.top-earners-card .top-earner img {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    object-fit: cover;
    margin-right: 10px;
}

.top-earners-card .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 0px !important;
}

.top-earners-card .user-name {
    font-size: 14px;
    color: #111827;
}

.top-earners-card .amount {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    padding-right: 5px;
}

@media (max-width: 767px) {

    .row.top-earners-card {
        display: block;
    }
}

.top-earners-card .highcharts-figure,
.top-earners-card .highcharts-data-table table {
    min-width: 200px;
    max-width: 200px;
    margin: 0.5em auto;
}

.top-earners-card .highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 250px;
}

.top-earners-card .highcharts-data-table caption {
    padding: 0em 0;
    font-size: 1.2em;
    color: #555;
}

.top-earners-card .highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.top-earners-card .highcharts-data-table td,
.top-earners-card .highcharts-data-table th,
.top-earners-card .highcharts-data-table caption {
    padding: 0.5em;
}

.top-earners-card .highcharts-data-table thead tr,
.top-earners-card .highcharts-data-table tbody tr:nth-child(even) {
    background: #f8f8f8;
}

.top-earners-card .highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.top-earners-card .highcharts-description {
    margin: 0.3rem 10px;
}


/**** TOP EARNERS card****/

/****** recent joining card *****/
.recent-Joinings-accordion-container {
    margin-top: 15px;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 20px;
    max-height: 610px;
}

.recent-Joinings-accordion-container h3 {
    margin: 20px 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-top: 0px;
}

.recent-Joinings-accordion-container .accordion-item {
    border-bottom: 1px solid #eaeaea;
    /* border-radius: 10px !important;*/
}

.recent-Joinings-accordion-container .accordion-header {
    padding: 10px 0px;
    background: #f9fafc00;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    /* border-radius: 10px !important; */
    border-bottom: solid 1px #f2f2f2;
}

.recent-Joinings-accordion-container .recent-Joinings-body {
    /*overflow-y: scroll;*/
    height: 515px;
}

.recent-Joinings-accordion-container .accordion-header:hover,
.recent-Joinings-accordion-container .accordion-item.active .accordion-header {
    background: #dedede00;
    border-bottom: solid 1px #b1b1b1;
}

.recent-Joinings-accordion-container .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px !important;
}

.recent-Joinings-accordion-container .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    background-color: #ccc;
}

.recent-Joinings-accordion-container .user-text {
    display: flex;
    flex-direction: column;
}

.recent-Joinings-accordion-container .user-name {
    font-weight: 600;
    font-size: 16px;
}

.recent-Joinings-accordion-container .user-joined {
    font-size: 12px;
    color: #777;
}

.recent-Joinings-accordion-container .arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.recent-Joinings-accordion-container .accordion-item.active .arrow {
    transform: rotate(-90deg);
}

.recent-Joinings-accordion-container .accordion-content {
    display: none;
    padding: 10px;
    animation: fadeIn 0.3s ease-in-out;
}

.recent-Joinings-accordion-container .accordion-item.active .accordion-content {
    display: block;
}

.recent-Joinings-accordion-container .info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #ddd;
    font-size: 14px;
}
.recent-Joinings-accordion-container .info-row:last-child {
    border-bottom: 0px;
}
.recent-Joinings-accordion-container .info-label {
    color: #999;
}

.recent-Joinings-accordion-container .info-value {
    color: #333;
    font-weight: 500;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/***** recent joining card end ******/

/***** top sposor card ****/
.top-sponsor-card.row {
    min-height: 610px;
    max-height: 610px;
}
.top-sponsor-card {
    margin-top: 15px;
    margin-left: 0px;
    /* margin: 10px 0px; */
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden;
}

.top-sponsor-card h2 {
    /*margin: 0 0 15px;*/
    font-size: 16px;
    font-weight: 600;
    color: #333;
    /* padding-top: 6px; */
    margin-bottom: 20px;

}

.top-sponsor-card h2 span {
    color: #9aa0aa;
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
}

.top-sponsor-card .sponsor-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.top-sponsor-card .sponsor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background: #fafafa; */
    padding: 10px 0px;
    /* border-radius: 8px !important; */
    transition: background 0.2s ease;
    border-bottom: solid 1px #e7e7e7;
}

.top-sponsor-card .sponsor-item:hover {
    /*background: #eef6ff;*/
}

.top-sponsor-card .sponsor-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-sponsor-card .sponsor-img {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    background-color: #ddd;
}

.top-sponsor-card .sponsor-name {
    font-size: 16px;
    color: #333;
    text-transform: capitalize;
}

.top-sponsor-card .referrals {
    /* background-color: #28a745; */
    color: #4d4949;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px !important;
    font-weight: 600;

}

/***** top sposor card end****/

/**** info chat-graph ****/
.infoChart-tab-section {
    /* margin: 10px 0px; */
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    display: block;
    float: left;
    position: relative;
}
.infoChart-tab-section .infoHead h3 {
    margin: 15px 20px;
    padding: 10px 0px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.infoChart-tab-section .tabs {
    display: flex;
    background: #fff;
    /* border-bottom: 1px solid #ccc; */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    margin: 10px 20px;
}
.infoChart-tab-section .tab {
    padding: 15px 15px;
    cursor: pointer;
    font-size: 14px;
    background: #Fff;
    color: #3B3A3C;
    margin-right: 10px;
    border: 1px dashed #ddd;
    border-radius: 6px !important;
}
.infoChart-tab-section .tab.active {
    font-weight: 500;
    /* border-bottom: 3px solid #007BFF; */
    /* background: #F0EDFF; */
    border-color: #a5a4a9;
    color: #8364E2;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.infoChart-tab-section .tab-content {
    display: none;
    padding: 20px;
    min-height: 500px;
}

.infoChart-tab-section .tab-content.active {
    display: block;
    min-height: 500px;
    overflow: auto;
}

.infoChart-tab-section .filter-group {
    margin-bottom: 20px;
    float: right;
    position: absolute;
    right: 10px;
    top: 25px;
}

.infoChart-tab-section .filter-group select {
    padding: 6px 10px;
    font-size: 14px;
    border: solid 1px #ddd;
    border-radius: 5px !important;
}

.infoChart-tab-section .info-blocks {
    display: block;
    /* gap: 20px; */
    /* flex-wrap: wrap; */
    margin-bottom: 20px;
    margin-top: 25px;
    /* width: 20%; */
    float: left;
    /* margin-right: 10px;*/
    padding-left: 15px;
}

.infoChart-tab-section .info-block {
    background: #fff;
    /* padding: 20px; */
    /* border-radius: 8px !important; */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    flex: 1;
    /* min-width: 220px; */
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.info-block.totalBlock {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

.info-block.totalBlock h4, .info-block.totalBlock p {
    font-size: 18px;
    font-weight: bold;
}
.infoChart-tab-section .info-block h4 {
    margin: 0px;
    font-size: 13px;
}

.infoChart-tab-section .info-block p {
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
}
#join-chart, #commission-chart {
    border-right: solid 1px #c1c1c1;
    margin-right: 0px;
}

#join-chart .highcharts-container, #commission-chart .highcharts-container {
    /*width: 100% !important;*/
}
.infoChart-tab-section .tab img {
    width:25px;
}
@media (max-width: 767px) {
    .infoChart-tab-section .info-blocks {
        width: 100% !important;
        float: left;
        margin-right: 0px;
    }
}

/**** info chat-graph end ****/
@media (max-width: 992px) {
    .dashboard .card {
        width: 48.7% !important;
    }

    .referral-card {
        margin: 15px 0px !important
    }
}

@media (max-width: 767px) {
    .dashboardTile .card {
        width: 100%;
        margin-bottom: 10px;
    }
}


/**** info new look cahrt ****/

.row.detailedGraphs .navHolder li img {
    width: 30px;
    display: inline-block;
    /*display: block;*/
    text-align: left;
    margin: auto;
   /* margin-bottom: 10px;*/
}
.row.detailedGraphs .navHolder {
    border-radius: 10px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.row.detailedGraphs .navHolder li {
    padding: 18px;
    text-align: left;
    border: 0px;
    /*border-radius: 10px !important;*/
    border-bottom: solid 1px #ddd;
}
.row.detailedGraphs .navHolder li:first-child{
    border-top-left-radius: 10px !important;
}
.row.detailedGraphs .navHolder li:last-child{
    border-bottom-left-radius: 10px !important;
}
.row.detailedGraphs .navHolder li i {
    display: none;
}
.row.detailedGraphs .navHolder li p {
    color:#6f6e6e;
    text-align: left;
    bottom: 0px;
    margin-left: 6px;
}
.row.detailedGraphs .navHolder li.active p {
    color: #222;
}
.row.detailedGraphs .navHolder {
    border-radius: 10px !important;
}

.graphPaneWrapper .innerHolder {
    min-height: 472px;
}
.graphPaneWrapper .innerHolder {
    border-bottom: 0px;
    border-top: 0px;
    border-right: 0px;
    border-radius: 10px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.graphPaneWrapper .innerHolder .portlet.light {
    border-radius: 10px !important;
    border-top-left-radius: 0px !important;
}
.row.detailedGraphs .graphPaneWrapper.col-md-9.col-sm-9 {
    padding-right: 0px;
}

ul.commissionListInner {
    list-style: none;
    padding: 0;
}

ul.commissionListInner li {
    padding: 5px 0;
    font-weight: 500;
    overflow: hidden;
    font-size: 13px;
}

ul.commissionListInner li label {
    font-weight: 600;
    color: #7d7878;
    max-width: 75%;
    float: left;
    font-size: 13px;
}

li.commissionNav .totalAmount {
    background: #2dadb9;
    min-width: 28px;
    padding: 0 5px;
    border-radius: 2px !important;
    float: right;
    color: white;
    font-size: 11px;
    flex: 1;
    text-align: center;
}

ul.commissionListInner h3 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 6px;
    margin-bottom: 0px;
    /*white-space: nowrap;*/
    /* border-bottom: 3px solid #e0e0e0; */
    margin-top: 0;
}

.commissionAmountBox {
    font-size: 30px;
    margin: 15px 0;
    color: #656161;
}

.commissionAmountBox i {
    color: #cac4c4;
}

.portlet-title .scopeChooser {
    margin-left: 20px;
    display: inline-block;
    padding: 8px;
    float: right;
}

.selectedWallet, .selectedScope {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    border-radius: 12px !important;
    padding: 2px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
    overflow: hidden;
    border: 1px solid #cacaca;
    margin-right: 5px;
    background: #fff;
}

.selectedWallet p, .selectedScope p {
    display: inline;
    margin: 0;
}

.selectedWallet span, .selectedScope span {
    margin-right: 2px;
    display: inline-block;
    font-size: 14px;
}

.selectedWallet i, .selectedScope i {
    margin-left: 4px;
}


/**** user new theme side ****/

.congrat-card.card {
    background: #ffffff;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 14px;
    display: block;
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    min-height: 210px;
}
.card-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-left h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    margin: 4px 0 16px;
}
.card-left .detail {
    margin: 4px 0 16px;
    font-size: 14px;
    color: #9ca3af;
}
.card-left .amount {
    font-size: 26px;
    font-weight: bold;
    color: #4f46e5;
    margin: 0;
}
.card-left .amount label {
    font-size: 10px;
    display: block;
    margin: 0px;
    padding: 0px;
    color: #6e6e6e;
}
.card-left .target {
    font-size: 11px;
    color: #6b7280;
    margin: 1px 0;
    display: flex;
    justify-content: space-between;
}
.congrat-card .package {
    vertical-align: middle;
    font-weight: 500;
    color: #646464;
    background: #c1f1d2;
    padding: 2px 8px;
    border-radius: 5px !important;
    display: inline-block;
}
.card-right img {
    width: 100%;
}

/*** user recent tab block ***/
.recent-tab-card {
    margin: 15px 0px 0px;
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 12px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    /*min-height: 520px;*/
    min-height: 512px;
}
.recent-tab-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recent-tab-card .card-header h3 {
    font-size: 18px;
    /*margin-bottom: 5px;*/
    margin: 0px;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.recent-tab-card .tabs {
    display: flex;
    gap: 15px;
}

.recent-tab-card .tab {
    cursor: pointer;
    font-size: 14px;
    color: #5a4fcf;
    text-decoration: none;
}

.recent-tab-card .tab.active {
    font-weight: bold;
    border-bottom: 2px solid #5a4fcf;
}

.recent-tab-card .tab-content {
    margin-top: 20px;
    font-size: 14px;
    color: #333;
}

.recent-tab-card .tab-pane {
    display: none;
}

.recent-tab-card .tab-pane.active {
    display: block;
}

/**** tab recent Joinings ***/
.recent-tab-car .recent-Joinings-body {
    overflow-y: scroll;
    height: 415px;
}
.recent-tab-card .recent-Joinings-body .accordion-item {
    border-bottom: 1px solid #eaeaea;
    border-radius: 10px !important;
}
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-header {
    padding: 10px;
    background: #f9fafc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    border-radius: 10px !important;
}

.recent-tab-card .recent-Joinings-body .accordion-item .accordion-header:hover,
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-item.active .accordion-header {
    background: #e6f1ff;
}
.recent-tab-card .recent-Joinings-body .accordion-item .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.recent-tab-card .recent-Joinings-body .accordion-item .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    background-color: #ccc;
}
.recent-tab-card .recent-Joinings-body .accordion-item .user-text {
    display: flex;
    flex-direction: column;
}
.recent-tab-card .recent-Joinings-body .accordion-item .user-name {
    font-weight: 600;
    font-size: 16px;
}
.recent-tab-card .recent-Joinings-body .accordion-item .user-joined {
    font-size: 12px;
    color: #777;
}
.recent-tab-card .recent-Joinings-body .accordion-item .arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}
.recent-tab-card .recent-Joinings-body .accordion-item.active .arrow {
    transform: rotate(-90deg);
}
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-content {
    display: none;
    padding: 5px 10px;
    animation: fadeIn 0.3s ease-in-out;
}
.recent-tab-card .recent-Joinings-body .accordion-item.active .accordion-content {
    display: block;
}
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-content .info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #f1f1f1;
    font-size: 14px;
}
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-content .info-label {
    color: #999;
}
.recent-tab-card .recent-Joinings-body .accordion-item .accordion-content .info-value {
    color: #333;
    font-weight: 500;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/**** tab recent activity ***/
.recent-activity-body .timeline {
    position: relative;
    padding-left: 0px;
    list-style: none;
}

.recent-activity-body .timeline::before {
    content: "";
    position: absolute;
    left: 75px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #e3e3e3;
    margin-left:0px;
}

.recent-activity-body .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
}

.recent-activity-body .timeline-item:last-child {
    margin-bottom: 0;
}

.recent-activity-body .timeline-time {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

.recent-activity-body .timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
}

.recent-activity-body .timeline-item .purple { background: #6A5ACD; }
.recent-activity-body .timeline-item .yellow { background: #FFC107; }

.recent-activity-body .timeline-item .timeline-content {
    font-size: 14px;
    color: #333;
}

.recent-activity-body .timeline-item .timeline-content strong {
    font-weight: bold;
}

.recent-activity-body .timeline-item .timeline-content a {
    color: #6A5ACD;
    text-decoration: none;
}

.recent-activity-body .timeline-item .timeline-content a:hover {
    text-decoration: underline;
}

/**** top performer tab ****/
.top-performer-tab-card {
    background: #fff;
    border-radius: 12px !important;
    padding: 20px;
    /* width: 400px; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 15px 0px 0px;
    min-height: 363px;
}

.top-performer-tab-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-performer-tab-card .card-header h3 {
    font-size: 18px;
    /*margin-bottom: 5px;*/
    margin: 0px;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.top-performer-tab-card .tabs {
    display: flex;
    gap: 15px;
}

.top-performer-tab-card .tab {
    cursor: pointer;
    font-size: 14px;
    color: #707070;
    text-decoration: none;
}

.top-performer-tab-card .tab.active {
    font-weight: bold;
    border-bottom: 2px solid #707070;
}

.top-performer-tab-card .tab-content {
    margin-top: 20px;
    font-size: 14px;
    color: #333;
}

.top-performer-tab-card .tab-pane {
    display: none;
}

.top-performer-tab-card .tab-pane.active {
    display: block;
}

/***** topSponsor tab start ****/
.sponsorTab-body .sponsor-list {
    display: flex;
    flex-direction: column;
    /*gap: 10px;*/
    gap: 5px;
}
.sponsorTab-body .sponsor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    padding: 6px 14px;
    border-radius: 8px !important;
    transition: background 0.2s ease;
}
.sponsorTab-body .sponsor-item:hover {
    background: #eef6ff;
}
.sponsorTab-body .sponsor-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sponsorTab-body .sponsor-img {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    background-color: #ddd;
}
.sponsorTab-body .sponsor-name {
    font-size: 16px;
    color: #333;
    text-transform: capitalize;
}
.sponsorTab-body .referrals {
    /* background-color: #28a745; */
    color: #4d4949;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px !important;
    font-weight: 600;

}

/***** topSponsor tab start ****/
.earnersTab-body .earners-list {
    display: flex;
    flex-direction: column;
    /*gap: 10px;*/
    gap: 5px;
}
.earnersTab-body .earners-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    padding: 6px 14px;
    border-radius: 8px !important;
    transition: background 0.2s ease;
}
.earnersTab-body .earners-item:hover {
    background: #eef6ff;
}
.earnersTab-body .earners-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.earnersTab-body .earners-img {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    background-color: #ddd;
}
.earnersTab-body .earners-name {
    font-size: 16px;
    color: #333;
    text-transform: capitalize;
}
.earnersTab-body .amount {
    /* background-color: #28a745; */
    color: #4d4949;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px !important;
    font-weight: 600;

}


/****** tablet view *****/
@media (max-width: 1366px) and (min-width: 1024px) {
    .business-Widget {
        min-height: 195px !important;
    }
    .row.top-performer-tab-card-outer .top-performer-tab-card {
        min-height: 460px !important;
        max-height: 460px !important;
    }
}
@media (max-width: 1236px) and (min-width: 800px) {
    .business-Widget {
        min-height: 195px !important;
    }
}
@media (max-width: 1024px) and (min-width: 768px){
    .dashboardTile .col-sm-3 {
        width: 50% !important;
        margin-bottom: 10px;
    }

    .business-Widget .col-sm-6.rightBlock {
        width: 100%  !important;
        display: none;
    }

    .business-Widget .col-sm-6.leftBlock {
        width: 100%  !important;
    }

    .recent-card {
        max-height: 100% !important;
        max-height: 475px !important;
        overflow-x: auto;
    }

    .business-card .stats-container .stats-box.expenses {
        width: 100% !important;
        display: block;
        float: left;
    }

    .business-card .stats-container .stats-box.sales {
        width: 100% !important;
        display: block;
    }

    .business-card .stats-container {
        display: block !important;
    }

    .business-Widget {
        min-height: 235px;
    }
    .col-sm-3.ipad-view, .col-sm-6.ipad-view{
        width: 100% !important;
    }
    .ipad-view .row.top-earners-card {
        margin-right: -15px !important;
    }

    .ipad-view .recent-Joinings-accordion-container.row {
        margin-left: 0px !important;
    }

    /*** tablet view user side ***/

    .top-performer-tab-card {
        min-height: 440px !important;
    }

    .top-performer-tab-card .card-header {
        display: block !important;
    }

    .recent-tab-card .card-header {
        display: block !important;
    }

    .recent-tab-card {
        min-height: 470px !important;
    }

}

/**** mobile view ****/

@media (max-width: 767px) {
    .row.world-map-card-outer {
        padding-right: 15px !important;
    }
    .row.business-card-outer {
        margin: 0px !important;
    }
    .row.recent-card-outer {
        margin: 0px !important;
    }
    .recent-Joinings-accordion-container.row {
        margin: 0px !important;
        margin-bottom: 10px !important;
        max-height: 625px;
    }
    .row.detailedGraphs .graphPaneWrapper.col-md-9.col-sm-9 {
        padding-right: 15px !important;
    }

    .row.recent-tab-card-outer {
        padding-right: 15px !important;
    }
    .row.top-performer-tab-card-outer{
        margin: 0px !important;
    }
    .row.top-earners-card {
        min-height: 610px;
        max-height: 100% !important;
    }
    .top-sponsor-card{
        margin-right: 0px !important;
    }
}



/* admin config style */

.moduleSettingsWrapper .formField .themeItem {
    border: solid 1px #f5f5f5;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    min-height: 160px;
    padding: 10px;
    border-radius: 10px !important;
}

.moduleSettingsWrapper .formField .themeItem input.themeRadio {
    /* opacity: 0; */
    position: absolute;
    bottom: 22px;
    right: 0px;
}

.moduleSettingsWrapper .formField .themeItem img.themeImg {
    width: 100%;
    height: 100px;
}

.moduleSettingsWrapper .formField .themeItem h4.themeName {
    margin: 0px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0px;
}

.moduleSettingsWrapper .formField .themeItem.selected {
    border: solid 1px #4CAF50;
}

.moduleSettingsWrapper .formField .themeItem.selected h4.themeName {
    color: #15c189;
}

.moduleSettingsWrapper .formField .themeItem:hover {
    border: solid 1px #4CAF50;
}

body.darkModeTheme .card.card-ewallet .card-icon img {
    filter: invert(64%) sepia(72%) saturate(648%) hue-rotate(1deg) brightness(105%) contrast(83%);
}
.referral-card .social-links a:hover {
    text-decoration: none;
}

@media(min-width: 767px){
    .page-content-wrapper .content {
        padding-right: 15px;
    }
    .dashboardTile .col-sm-3 {
        padding-right: 0px;
    }

    .dashboardTile .col-sm-3:last-child {
        padding-right: 15px;
    }
}
div.noData-bx .nodataFound-img {
    width: 50px !important;
}
.noData-bx h4 {
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #706d6d;
    margin: 10px 0px !important;
}