/* =========================================================
   MORE MONEY NFT - PREMIUM SIDEBAR
   ========================================================= */

:root{
    --mmy-primary:#0f6bff;
    --mmy-primary2:#00c6ff;
    --mmy-bg:#040b17;
    --mmy-card:#091425;
    --mmy-border:rgba(255,255,255,0.06);
    --mmy-text:#ffffff;
    --mmy-muted:#8ea3bf;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.main-sidebar{
    background:
        linear-gradient(
            180deg,
            #020817 0%,
            #040d1d 40%,
            #020817 100%
        ) !important;
    border-right:1px solid rgba(255,255,255,0.04);
    box-shadow:
        15px 0 40px rgba(0,0,0,0.35);
    overflow:hidden;
}

/* =========================================================
   LOGO SECTION
   ========================================================= */

.brand-link{
    background:
        linear-gradient(
            90deg,
            #0f6bff,
            #007bff
        ) !important;
    height:72px;
    border-bottom:none !important;
    padding:0 16px !important;
    display:flex;
    align-items:center;
}

.brand-link .brand-image{
    max-height:40px !important;
}

.brand-link .brand-text{
    font-size:20px;
    font-weight:700;
    color:#fff !important;
}

.brand-link .brand-text span{
    color:#00c6ff;
}

/* =========================================================
   SIDEBAR USER PANEL
   ========================================================= */

.user-panel{
    border-bottom:1px solid rgba(255,255,255,0.05) !important;
}

.user-panel .image img{
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px solid #0f6bff;
    box-shadow:
        0 0 15px rgba(0,198,255,0.35);
}

.user-panel .info{
    padding-top:4px !important;
}

.user-panel .info a{
    color:#fff !important;
    font-size:15px;
    font-weight:600;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-sidebar{
    padding:10px 10px;
}

.nav-sidebar .nav-item{
    margin-bottom:5px;
}

.nav-sidebar .nav-link{
    height:40px;
    padding:0 14px !important;
    border-radius:12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    
    font-size:14px;
    font-weight:500;
    display:flex;
    align-items:center;
    transition:0.25s;
}

/* =========================================================
   ICONS
   ========================================================= */

.nav-sidebar .nav-link i{
    width:28px;
    font-size:16px;
    margin-right:6px;
}

/* =========================================================
   HOVER EFFECT
   ========================================================= */

.nav-sidebar .nav-link:hover{
    transform:translateX(3px);
    background:
        rgba(15,107,255,0.12);
}

/* =========================================================
   ACTIVE MENU
   ========================================================= */

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active{
    background:
        linear-gradient(
            90deg,
            #0f6bff,
            #0066ff
        ) !important;
    box-shadow:
        0 6px 18px rgba(15,107,255,0.25);
}

/* glow effect */

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active::before{
    content:"";
    position:absolute;
    left:-20px;
    top:0;
    width:60px;
    height:100%;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.18),
            transparent
        );
    transform:skewX(-20deg);
}

/* =========================================================
   TREEVIEW ARROW
   ========================================================= */

.nav-sidebar .right{
    right:12px;
    font-size:12px;
}

/* =========================================================
   SIDEBAR SCROLL
   ========================================================= */

.sidebar::-webkit-scrollbar{
    width:5px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#0f6bff;
    border-radius:20px;
}

/* =========================================================
   BOTTOM PROMO CARD
   ========================================================= */

.sidebar-promo{
    margin:20px 15px;
    background:
        linear-gradient(
            180deg,
            rgba(9,20,37,1),
            rgba(5,14,28,1)
        );
    border-radius:22px;
    padding:22px 18px;
    border:1px solid rgba(255,255,255,0.05);
    position:relative;
    overflow:hidden;
}

.sidebar-promo::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:180px;
    height:180px;
    background:
        radial-gradient(
            rgba(0,198,255,0.25),
            transparent 70%
        );
}

.sidebar-promo img{
    width:100%;
    margin-bottom:18px;
}

.sidebar-promo h4{
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
}

.sidebar-promo p{
    color:#8ea3bf;
    font-size:14px;
    line-height:1.6;
    margin-bottom:18px;
}

.sidebar-promo .btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:14px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    background:
        linear-gradient(
            90deg,
            #0f6bff,
            #00c6ff
        );
    box-shadow:
        0 10px 25px rgba(0,198,255,0.18);
    transition:0.3s;
}

.sidebar-promo .btn:hover{
    transform:translateY(-2px);
}

/* =========================================================
   CONTENT AREA
   ========================================================= */

.content-wrapper{
    background:
        radial-gradient(
            circle at top left,
            rgba(0,198,255,0.06),
            transparent 30%
        ),
        #040b17 !important;
}

/* =========================================================
   TOP NAVBAR
   ========================================================= */

.main-header.navbar{
    background:
        rgba(4,11,23,0.88) !important;
    backdrop-filter:blur(12px);
    border-bottom:
        1px solid rgba(255,255,255,0.05);
    box-shadow:
        0 5px 20px rgba(0,0,0,0.2);
}

.main-header .nav-link{
    color:#d5e4f5 !important;
}

.main-header .nav-link:hover{
    color:#00c6ff !important;
}
/* =========================================================
   PREMIUM DARK CARD DESIGN
   MORE MONEY NFT
   ========================================================= */

/* =========================================================
   CARD
   ========================================================= */

.card{

    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(10,18,35,0.98) 0%,
            rgba(5,12,24,0.98) 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.05) !important;

    border-radius:22px !important;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35);

    backdrop-filter:blur(14px);

    transition:all 0.3s ease;
}

/* =========================================================
   CARD HOVER
   ========================================================= */

.card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0,198,255,0.08);
}

/* =========================================================
   GLOW EFFECT
   ========================================================= */

.card::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:240px;
    height:240px;

    background:
        radial-gradient(
            rgba(0,198,255,0.12),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   CARD HEADER
   ========================================================= */

.card-header{

    position:relative;

    background:
        linear-gradient(
            90deg,
            rgba(15,107,255,0.08),
            rgba(0,198,255,0.02)
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.05) !important;

    padding:16px 20px !important;

    min-height:auto !important;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* =========================================================
   CARD TITLE
   ========================================================= */

.card-title{

    color:#ffffff !important;

    font-size:20px !important;

    font-weight:700 !important;

    letter-spacing:0.3px;

    margin:0 !important;

    display:flex;
    align-items:center;
}

/* icon inside title */

.card-title i{

    margin-right:10px;

    color:#00c6ff;
}

/* =========================================================
   CARD TOOLS
   ========================================================= */

.card-tools .btn{

    width:34px;
    height:34px;

    border-radius:12px !important;

    border:none !important;

    background:
        rgba(255,255,255,0.04) !important;

    color:#dce9f8 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:0.25s;
}

.card-tools .btn:hover{

    background:
        rgba(15,107,255,0.18) !important;

    color:#fff !important;
}

/* =========================================================
   CARD BODY
   ========================================================= */

.card-body{

    padding:20px !important;

    color:#dce9f8;

    position:relative;
}

/* =========================================================
   CARD FOOTER
   ========================================================= */

.card-footer{

    background:
        rgba(255,255,255,0.02) !important;

    border-top:
        1px solid rgba(255,255,255,0.05) !important;

    padding:16px 20px !important;
}

/* =========================================================
   OUTLINE CARD
   ========================================================= */

.card-outline{

    border-top:
        3px solid #0f6bff !important;
}

/* =========================================================
   CARD PRIMARY
   ========================================================= */

.card-primary{

    border-top:
        3px solid #0f6bff !important;
}

/* =========================================================
   CARD SUCCESS
   ========================================================= */

.card-success{

    border-top:
        3px solid #00d68f !important;
}

/* =========================================================
   CARD WARNING
   ========================================================= */

.card-warning{

    border-top:
        3px solid #ffb020 !important;
}

/* =========================================================
   CARD DANGER
   ========================================================= */

.card-danger{

    border-top:
        3px solid #ff4d6d !important;
}

/* =========================================================
   SMALL BOXES INSIDE CARD
   ========================================================= */

.card-stat{

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:18px;

    padding:18px;

    transition:0.25s;
}

.card-stat:hover{

    background:
        rgba(15,107,255,0.08);

    transform:translateY(-2px);
}

.card-stat-title{

    color:#8ea3bf;

    font-size:13px;

    margin-bottom:8px;
}

.card-stat-value{

    color:#fff;

    font-size:28px;

    font-weight:700;
}

/* =========================================================
   TABLE INSIDE CARD
   ========================================================= */

.card .table{
    margin-bottom:0 !important;
}

/* =========================================================
   SCROLLABLE CARD BODY
   ========================================================= */

.card-scroll{

    max-height:500px;

    overflow-y:auto;
}

.card-scroll::-webkit-scrollbar{
    width:5px;
}

.card-scroll::-webkit-scrollbar-thumb{

    background:#0f6bff;

    border-radius:20px;
}

/* =========================================================
   GRADIENT BORDER CARD
   ========================================================= */

.card-gradient{

    position:relative;

    background:#08111f !important;
}

.card-gradient::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(0,198,255,0.35),
            rgba(15,107,255,0.08),
            transparent
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;
}

/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.card .btn{
    transition:0.25s;
}

.card .btn:hover{
    transform:translateY(-2px);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

    .card-header{
        padding:14px 16px !important;
    }

    .card-body{
        padding:16px !important;
    }

    .card-title{
        font-size:17px !important;
    }

}
/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:991px){
    .main-sidebar{
        box-shadow:none;
    }
    .nav-sidebar .nav-link{
        height:40px;
        border-radius: 5px;
    }

}