.page-footer {
    bottom: 0;
    width: 100%;
    position: fixed;
}

.page-head .page-title {
    padding: 17px 0px 10px 5px !important;
}

.pricing-content .lbl-num {
    padding: 3px;
}

.pricing-content li {
    padding: 5px 5px 5px 2px;
    /* font-size:29px!important; */
}

.pricing-content .fa-bolt {
    color: #F3565D !important;
}

.pricing-content .fa-bullhorn {
    color: #DFBA49 !important;
}

.pricing-content .fa-bell-o {
    color: #45B6AF !important;
}

.pricing-head h3 {
    padding: 0 !important;
}

ul li span {
    font-size: 24px;
}

/* Base dashboard stat styling */
.dashboard-stat {
    border-radius: 8px !important;
    color: #fff !important;
    padding: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* Add padding for internal spacing */
    box-sizing: border-box;
    /* Ensure padding is included in total size */
    min-height: 100px;
    /* Optional: Set a minimum height for consistency */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dashboard-stat:hover {
    transform: translateY(-7px);
    box-shadow: 0 16px 10px rgba(0, 0, 0, 0.2);
}

.dashboard-stat .content {
    position: relative;
}

/* Color variations */
.deep-blue {
    background: linear-gradient(135deg, #007BFF, #0056b3) !important;
}

.emerald-green {
    background: linear-gradient(135deg, #28A745, #1e7e34) !important;
}

.coral-red {
    background: linear-gradient(135deg, #f78b96, #e44454) !important;
}

.golden-yellow {
    background: linear-gradient(135deg, #FFC107, #d39e00) !important;
}

.purple {
    background: linear-gradient(135deg, #6F42C1, #5a32a3) !important;
}

.light-blue {
    background: linear-gradient(135deg, #17A2B8, #117a8b) !important;
}

.teal {
    background: linear-gradient(135deg, #20C997, #1a9b76) !important;
}

.orange {
    background: linear-gradient(135deg, #FD7E14, #d26512) !important;
}

/* Icon and text styling */

.dashboard-stat .visual {
    display: flex;
    margin-bottom: 0;
}

.dashboard-stat .visual i {
    /* font-size: 3.0rem; */
    opacity: 0.8;
    padding-left: 37px;
    padding-bottom: 1px;
    margin-top: -20px;
}

.dashboard-stat .details .number {
    font-size: 1.8rem;
    /* font-weight: bold; */
}

.dashboard-stat .details .desc {
    /* font-size: 1.5rem; */
    opacity: 0.9;
}

.dashboard-stat .more {
    color: #fff !important;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.dashboard-stat .more:hover {
    opacity: 1;
}

/* Container for tabs and content */
.tabs-container {
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.portlet.light-dashboard {
    padding: 0 12px 0 12px !important;
}

/* Style the tab navigation */
.nav-tabs {
    display: block;
    border-bottom: 0;
    list-style: none;
    padding: 5px;
    margin: 0;
}

.nav-item {
    margin-right: 5px;
}

.nav-link {
    display: block !important;
    padding: 10px 20px;
    cursor: pointer;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    text-decoration: none;
    color: #fff;
    transition: background 0.3s;
}
/* Define gradient pairs for normal and hover states */
:root {
    --gradient-bi-dashboard: linear-gradient(90deg, #6b9bff, #a3c1ff); /* Light blue for BI Dashboard */
    --gradient-bi-dashboard-hover: linear-gradient(90deg, #5a8ae6, #92b0e6);
    --gradient-finance: linear-gradient(90deg, #34c759, #8ee4af); /* Light green for Finance */
    --gradient-finance-hover: linear-gradient(90deg, #2cb44d, #7cd19c);
    --gradient-sales: linear-gradient(90deg, #9b59b6, #d7b9e5); /* Light purple for Sales */
    --gradient-sales-hover: linear-gradient(90deg, #874aa3, #c4a6d2);
    --gradient-after-sales: linear-gradient(90deg, #ff6b6b, #ff9f9f); /* Light red/pink for After Sales */
    --gradient-after-sales-hover: linear-gradient(90deg, #e65c5c, #e68c8c);
    --gradient-5: linear-gradient(90deg, #a855f7, #c084fc); /* Purple */
    --gradient-5-hover: linear-gradient(90deg, #9333ea, #a855f7);
    --gradient-6: linear-gradient(90deg, #f472b6, #f9a8d4); /* Pink */
    --gradient-6-hover: linear-gradient(90deg, #ec4899, #f472b6);
    --gradient-7: linear-gradient(90deg, #fb923c, #fdba74); /* Amber */
    --gradient-7-hover: linear-gradient(90deg, #ea580c, #fb923c);
    --gradient-8: linear-gradient(90deg, #22d3ee, #67e8f9); /* Cyan */
    --gradient-8-hover: linear-gradient(90deg, #06b6d4, #22d3ee);
    --gradient-9: linear-gradient(90deg, #f43f5e, #fb7185); /* Rose */
    --gradient-9-hover: linear-gradient(90deg, #e11d48, #f43f5e);
    --gradient-10: linear-gradient(90deg, #84cc16, #a3e635); /* Lime */
    --gradient-10-hover: linear-gradient(90deg, #65a30d, #84cc16);
    /* Add more gradients as needed */
}

/* Apply gradients to nav items */
.nav-item:nth-child(1) .nav-link {
    background: var(--gradient-bi-dashboard);
}
.nav-item:nth-child(1) .nav-link:hover {
    background: var(--gradient-bi-dashboard-hover);
    color: #fff;
}

.nav-item:nth-child(2) .nav-link {
    background: var(--gradient-finance);
}
.nav-item:nth-child(2) .nav-link:hover {
    background: var(--gradient-finance-hover);
    color: #fff;
}

.nav-item:nth-child(3) .nav-link {
    background: var(--gradient-sales);
}
.nav-item:nth-child(3) .nav-link:hover {
    background: var(--gradient-sales-hover);
    color: #fff;
}

.nav-item:nth-child(4) .nav-link {
    background: var(--gradient-after-sales);
}
.nav-item:nth-child(4) .nav-link:hover {
    background: var(--gradient-after-sales-hover);
    color: #fff;
}

.nav-item:nth-child(5) .nav-link { background: var(--gradient-5); }
.nav-item:nth-child(5) .nav-link:hover { background: var(--gradient-5-hover); color: #fff; }
.nav-item:nth-child(6) .nav-link { background: var(--gradient-6); }
.nav-item:nth-child(6) .nav-link:hover { background: var(--gradient-6-hover); color: #fff; }
.nav-item:nth-child(7) .nav-link { background: var(--gradient-7); }
.nav-item:nth-child(7) .nav-link:hover { background: var(--gradient-7-hover); color: #fff; }
.nav-item:nth-child(8) .nav-link { background: var(--gradient-8); }
.nav-item:nth-child(8) .nav-link:hover { background: var(--gradient-8-hover); color: #fff; }
.nav-item:nth-child(9) .nav-link { background: var(--gradient-9); }
.nav-item:nth-child(9) .nav-link:hover { background: var(--gradient-9-hover); color: #fff; }
.nav-item:nth-child(10) .nav-link { background: var(--gradient-10); }
.nav-item:nth-child(10) .nav-link:hover { background: var(--gradient-10-hover); color: #fff; }

/* Fallback for items beyond defined gradients */
.nav-item:nth-child(n+11) .nav-link {
    background: linear-gradient(90deg, #d1d5db, #e5e7eb); /* Default gray gradient */
}
.nav-item:nth-child(n+11) .nav-link:hover {
    background: linear-gradient(90deg, #9ca3af, #d1d5db);
    color: #fff;
}

/* Optional: Smooth transition for all nav links */
.nav-item .nav-link {
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-link.active {
    /* White background for active tab, no gradient */
    background: #fff !important;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    color: #333;
    /* Dark text for contrast on white */
}

.nav-link.active:hover {
    color: #333 !important;
}


.nav-link:hover {
    background: #e0e0e0;
}

.nav-link.active {
    background: #fff;
    /* border: 2px solid #333; */
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom: 0px;
    border-left: 2px solid #333;
    font-weight: bold;
}

/* Style the tab content */
.tab-content {
    display: none;
    /* padding: 20px; */
    border-top: none;
    background: #fff;
    border-radius: 0 0 5px 5px;
}

.tab-content.active {
    display: block;
}

span.font-green-sharp {
    font-size: x-large;
}
.shadow_col {
    height: 75vh;
}

@media only screen and (max-width: 600px) {

    /* Styles for small mobile devices */
    .dashboard-stat {
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 6px 0px;
    }

    .dashboard-stat .details .number {
        font-size: 2.1rem !important;
    }

    .dashboard-stat .visual {
        margin-bottom: 0;
    }

    .mobile-hide {
        display: none !important;
    }
    .shadow_col {
        height: 65vh;
        width: 70vw;
    }

}

@media only screen and (min-width: 601px) and (max-width: 768px) {
    .shadow_col {
        height: 65vh;
        width: 80vw;
    }
}