/**
 * ==========================================================
 * RAGO ACCOUNT
 * USER DASHBOARD
 * ==========================================================
 *
 * STYLE
 *
 * STEP-01
 * PART-01
 *
 * ==========================================================
*/

.rago-dashboard{

    display:grid !important;

    grid-template-columns:300px minmax(0,1fr) !important;

  min-height:calc(100vh - 32px);

    background:
    linear-gradient(
        180deg,
        #07111d,
        #091321
    );

    color:#ffffff;

    overflow:visible;

    align-items:start;

}

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

.rago-dashboard-sidebar{

    position:sticky;

    top:0;

   min-height:calc(100vh - 32px);

    padding:28px 20px;

    background:

    rgba(

        255,
        255,
        255,
        .03

    );

    border-right:

    1px solid rgba(

        0,
        212,
        255,
        .12

    );

    backdrop-filter:blur(18px);

}

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

.rago-dashboard-logo{

    margin-bottom:36px;

    text-align:center;

}

.rago-dashboard-logo h2{

    margin:0;

    font-size:28px;

    font-weight:800;

    letter-spacing:3px;

    color:#00d4ff;

}

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

.rago-dashboard-nav ul{

    margin:0;

    padding:0;

    list-style:none;

}

.rago-dashboard-nav li{

    margin-bottom:10px;

}

.rago-dashboard-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    text-decoration:none;

    color:#c8d3df;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

.rago-dashboard-nav a:hover{

    background:

    rgba(

        0,
        212,
        255,
        .10

    );

    color:#ffffff;

    transform:translateX(4px);

}

.rago-dashboard-nav li.active a{

    background:

    linear-gradient(

        90deg,

        rgba(0,212,255,.22),

        rgba(0,212,255,.08)

    );

    color:#ffffff;

    border:

    1px solid rgba(

        0,
        212,
        255,
        .18

    );

}

/*==================================================
MAIN AREA
==================================================*/

.rago-dashboard-main{

    padding:30px;

    overflow:auto;

}








/*==================================================
TOP HEADER
==================================================*/

.rago-dashboard-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:30px;

}

/*==================================================
SEARCH
==================================================*/

.rago-dashboard-search{

    flex:1;

}

.rago-dashboard-search input{

    width:100%;

    height:52px;

    padding:0 20px;

    border-radius:14px;

    border:1px solid rgba(
        255,
        255,
        255,
        .08
    );

    background:

    rgba(
        255,
        255,
        255,
        .04
    );

    color:#ffffff;

    font-size:15px;

    outline:none;

    transition:.30s;

}

.rago-dashboard-search input::placeholder{

    color:#8ea0b5;

}

.rago-dashboard-search input:focus{

    border-color:#00d4ff;

    box-shadow:

    0 0 0 4px rgba(
        0,
        212,
        255,
        .10
    );

}

/*==================================================
HEADER RIGHT
==================================================*/

.rago-dashboard-header-right{

    display:flex;

    align-items:center;

    gap:16px;

}

/*==================================================
HEADER ICON
==================================================*/

.rago-dashboard-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    border:1px solid rgba(
        255,
        255,
        255,
        .08
    );

    background:

    rgba(
        255,
        255,
        255,
        .04
    );

    color:#ffffff;

    font-size:18px;

    cursor:pointer;

    transition:.30s;

}

.rago-dashboard-icon:hover{

    border-color:#00d4ff;

    background:

    rgba(
        0,
        212,
        255,
        .10
    );

    box-shadow:

    0 0 18px rgba(
        0,
        212,
        255,
        .20
    );

}

/*==================================================
PROFILE
==================================================*/

.rago-dashboard-profile{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 14px;

    border-radius:16px;

    border:1px solid rgba(
        255,
        255,
        255,
        .08
    );

    background:

    rgba(
        255,
        255,
        255,
        .04
    );

}

.rago-dashboard-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        180deg,
        #00d4ff,
        #009cff
    );

    color:#06111f;

    font-size:18px;

    font-weight:700;

}

.rago-dashboard-user{

    display:flex;

    flex-direction:column;

}

.rago-dashboard-user strong{

    font-size:15px;

    color:#ffffff;

}

.rago-dashboard-user small{

    margin-top:3px;

    color:#8ea0b5;

    font-size:12px;

}












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

.rago-dashboard-welcome{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:20px;

    padding:20px 24px;

    border-radius:16px;

    border:1px solid rgba(
        255,
        255,
        255,
        .08
    );

    background:linear-gradient(
        135deg,
        rgba(0,212,255,.08),
        rgba(255,255,255,.03)
    );

    min-height:120px;

}

.rago-dashboard-welcome h1{

    margin:0;

    font-size:24px;

    font-weight:700;

    line-height:1.2;

    color:#ffffff;

}

.rago-dashboard-welcome p{

    margin-top:6px;

    color:#9fb2c8;

    font-size:13px;

    line-height:1.5;

}

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

.rago-dashboard-member{

    text-align:right;

    min-width:200px;

}

.rago-dashboard-member span{

    display:block;

    color:#00d4ff;

    font-size:15px;

    font-weight:700;

}

.rago-dashboard-member small{

    display:block;

    margin-top:4px;

    color:#8ea0b5;

    font-size:12px;

    line-height:1.4;

}










/*==================================================
STATS GRID
==================================================*/

.rago-dashboard-stats{

    display:grid;

    grid-template-columns:repeat(4,minmax(170px,220px));

    gap:14px;

    justify-content:space-between;

    margin-top:18px;

}

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

.rago-dashboard-card{

    position:relative;

    overflow:hidden;

    min-height:145px;

    padding:16px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

    transition:all .25s ease;

}

/*==================================================
TOP GLOW
==================================================*/

.rago-dashboard-card::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #00a2ff
    );

    opacity:.8;

}

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

.rago-dashboard-card:hover{

    transform:translateY(-3px);

    border-color:rgba(0,212,255,.22);

    box-shadow:
        0 8px 18px rgba(0,0,0,.25),
        0 0 14px rgba(0,212,255,.10);

}

/*==================================================
ICON
==================================================*/

.rago-dashboard-card-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:12px;

    margin-bottom:12px;

    background:linear-gradient(
        180deg,
        #00d4ff,
        #009cff
    );

    color:#04111f;

    font-size:18px;

}

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

.rago-dashboard-card h3{

    margin:0;

    color:#d7e2ef;

    font-size:13px;

    font-weight:600;

    line-height:1.3;

}

/*==================================================
NUMBER
==================================================*/

.rago-dashboard-card strong{

    display:block;

    margin-top:6px;

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    line-height:1.1;

}

/*==================================================
DESCRIPTION
==================================================*/

.rago-dashboard-card small{

    display:block;

    margin-top:6px;

    color:#8ea0b5;

    font-size:11px;

    line-height:1.4;

}

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

.rago-dashboard-card{

    animation:ragoCardFade .30s ease;

}

@keyframes ragoCardFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}























/*==================================================
YOUR TOOLS
==================================================*/

.rago-dashboard-tools{

    margin-bottom:24px;

}

.rago-dashboard-tools h2{

    margin:0 0 14px;

    font-size:20px;

    font-weight:700;

    color:#ffffff;

}

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

.rago-dashboard-tool{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px 18px;

    margin-bottom:12px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

    transition:.25s;

}

.rago-dashboard-tool:hover{

    transform:translateY(-2px);

    border-color:rgba(0,212,255,.25);

    box-shadow:
        0 8px 18px rgba(0,0,0,.25),
        0 0 12px rgba(0,212,255,.10);

}

/*==================================================
LEFT
==================================================*/

.rago-dashboard-tool-left{

    display:flex;

    align-items:center;

    gap:14px;

}

/*==================================================
ICON
==================================================*/

.rago-dashboard-tool-icon{

    width:48px;

    height:48px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        180deg,
        #00d4ff,
        #009cff
    );

    color:#06111f;

    font-size:20px;

    flex-shrink:0;

}

/*==================================================
TEXT
==================================================*/

.rago-dashboard-tool-left h3{

    margin:0;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

}

.rago-dashboard-tool-left p{

    margin-top:4px;

    color:#8ea0b5;

    font-size:12px;

    line-height:1.4;

}

/*==================================================
RIGHT
==================================================*/

.rago-dashboard-tool-right{

    display:flex;

    align-items:center;

    gap:12px;

}

/*==================================================
STATUS
==================================================*/

.rago-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:78px;

    padding:6px 12px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

}

/*==================================================
BUTTON
==================================================*/

.rago-dashboard-tool-right button{

    height:36px;

    padding:0 16px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:linear-gradient(
        180deg,
        #00d4ff,
        #009cff
    );

    color:#06111f;

    font-size:12px;

    font-weight:700;

    transition:.25s;

}

.rago-dashboard-tool-right button:hover{

    transform:translateY(-1px);

    box-shadow:0 0 14px rgba(0,212,255,.25);

}




















/*==================================================
YOUR PLAN
==================================================*/

.rago-dashboard-plan{

    margin-bottom:24px;

}

.rago-dashboard-plan h2{

    margin:0 0 14px;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

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

.rago-dashboard-plan-card{

    position:relative;

    overflow:hidden;

    padding:18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:linear-gradient(
        135deg,
        rgba(0,212,255,.08),
        rgba(255,255,255,.03)
    );

    transition:.25s;

}

.rago-dashboard-plan-card:hover{

    transform:translateY(-2px);

    border-color:rgba(0,212,255,.25);

    box-shadow:
        0 10px 22px rgba(0,0,0,.25),
        0 0 14px rgba(0,212,255,.10);

}

/*==================================================
TOP STRIP
==================================================*/

.rago-dashboard-plan-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #008cff
    );

}

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

.rago-dashboard-plan-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:14px;

    margin-bottom:16px;

}

.rago-dashboard-plan-header h3{

    margin:0;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

.rago-dashboard-plan-header p{

    margin-top:4px;

    color:#8ea0b5;

    font-size:12px;

    line-height:1.4;

}

/*==================================================
FEATURES
==================================================*/

.rago-dashboard-plan-features{

    margin:0;

    padding:0;

    list-style:none;

}

.rago-dashboard-plan-features li{

    padding:8px 0;

    color:#d9e6f2;

    font-size:13px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.rago-dashboard-plan-features li:last-child{

    border-bottom:none;

}

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

.rago-dashboard-plan-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:18px;

}

.rago-dashboard-plan-footer small{

    display:block;

    color:#8ea0b5;

    font-size:11px;

}

.rago-dashboard-plan-footer strong{

    display:block;

    margin-top:3px;

    color:#ffffff;

    font-size:15px;

}

/*==================================================
UPGRADE BUTTON
==================================================*/

.rago-dashboard-upgrade{

    height:38px;

    padding:0 18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:linear-gradient(
        180deg,
        #00d4ff,
        #009cff
    );

    color:#06111f;

    font-size:12px;

    font-weight:700;

    transition:.25s;

}

.rago-dashboard-upgrade:hover{

    transform:translateY(-1px);

    box-shadow:0 0 14px rgba(0,212,255,.25);

}













/*==================================================
BOTTOM GRID
==================================================*/

.rago-dashboard-bottom{

    display:grid;

    grid-template-columns:

    repeat(

        3,

        1fr

    );

    gap:24px;

    margin-top:36px;

}

/*==================================================
BOTTOM CARDS
==================================================*/

.rago-dashboard-downloads,
.rago-dashboard-activity,
.rago-dashboard-notifications{

    padding:24px;

    border-radius:22px;

    border:1px solid rgba(
        255,
        255,
        255,
        .08
    );

    background:

    linear-gradient(

        180deg,

        rgba(
            255,
            255,
            255,
            .04
        ),

        rgba(
            255,
            255,
            255,
            .02
        )

    );

}

/*==================================================
SECTION TITLE
==================================================*/

.rago-dashboard-downloads h2,
.rago-dashboard-activity h2,
.rago-dashboard-notifications h2{

    margin:0 0 18px;

    font-size:22px;

    color:#ffffff;

}

/*==================================================
LIST ITEM
==================================================*/

.rago-dashboard-list{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:16px 0;

    border-bottom:1px solid rgba(
        255,
        255,
        255,
        .06
    );

}

.rago-dashboard-list:last-child{

    border-bottom:none;

}

.rago-dashboard-list strong{

    display:block;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

}

.rago-dashboard-list small{

    display:block;

    margin-top:5px;

    color:#8ea0b5;

    font-size:13px;

}

.rago-dashboard-list div:last-child{

    color:#00d4ff;

    font-size:13px;

    white-space:nowrap;

}

/*==================================================
SCROLLBAR
==================================================*/

.rago-dashboard-main::-webkit-scrollbar{

    width:8px;

}

.rago-dashboard-main::-webkit-scrollbar-thumb{

    background:

    rgba(
        0,
        212,
        255,
        .30
    );

    border-radius:20px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.rago-dashboard-bottom{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.rago-dashboard{

grid-template-columns:1fr;

}

.rago-dashboard-sidebar{

position:relative;

height:auto;

border-right:none;

border-bottom:1px solid rgba(
255,
255,
255,
.08
);

}

.rago-dashboard-header{

flex-direction:column;

align-items:stretch;

}

.rago-dashboard-header-right{

justify-content:space-between;

}

.rago-dashboard-welcome{

flex-direction:column;

align-items:flex-start;

}

.rago-dashboard-tool{

flex-direction:column;

align-items:flex-start;

}

.rago-dashboard-tool-right{

width:100%;

justify-content:space-between;

margin-top:18px;

}

.rago-dashboard-plan-footer{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.rago-dashboard-main{

padding:18px;

}

.rago-dashboard-stats{

grid-template-columns:

repeat(

2,

1fr

);

}

.rago-dashboard-card{

padding:18px;

}

.rago-dashboard-card strong{

font-size:28px;

}

.rago-dashboard-search input{

height:46px;

}

.rago-dashboard-avatar{

width:42px;

height:42px;

}

}

@media(max-width:576px){

.rago-dashboard-stats{

grid-template-columns:1fr;

}

.rago-dashboard-tool{

padding:16px;

}

.rago-dashboard-tool-icon{

width:52px;

height:52px;

font-size:22px;

}

.rago-dashboard-welcome{

padding:20px;

}

.rago-dashboard-welcome h1{

font-size:26px;

}

.rago-dashboard-downloads,
.rago-dashboard-activity,
.rago-dashboard-notifications{

padding:18px;

}

}





/* ======================================================
RAGO FULL WIDTH FIX
====================================================== */

body.page-template-default .site,
body.page-template-default .ast-container,
body.page-template-default .site-content,
body.page-template-default .content-area,
body.page-template-default #primary,
body.page-template-default article,
body.page-template-default .entry-content{

    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;

}












/* ======================================================
   RAGO DASHBOARD
   MOBILE RESPONSIVE OVERRIDE
   ====================================================== */

@media (max-width: 992px){

    .rago-dashboard{

        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        min-width:0 !important;

    }


    .rago-dashboard-sidebar{

        position:relative !important;

        top:auto !important;

        width:100% !important;

        min-height:auto !important;

        height:auto !important;

        padding:18px 16px !important;

        border-right:none !important;

        border-bottom:
            1px solid rgba(
                0,
                212,
                255,
                .12
            );

    }


    .rago-dashboard-main{

        width:100% !important;

        min-width:0 !important;

        padding:20px !important;

        overflow:visible !important;

    }


    .rago-dashboard-header{

        flex-direction:column !important;

        align-items:stretch !important;

    }


    .rago-dashboard-search{

        width:100% !important;

    }


    .rago-dashboard-header-right{

        width:100% !important;

        justify-content:flex-end !important;

    }


    .rago-dashboard-welcome{

        flex-direction:column !important;

        align-items:flex-start !important;

    }


    .rago-dashboard-member{

        width:100% !important;

        min-width:0 !important;

        text-align:left !important;

    }


    .rago-dashboard-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        width:100% !important;

    }


    .rago-dashboard-bottom{

        grid-template-columns:1fr !important;

    }

}


@media (max-width: 768px){

    .rago-dashboard-sidebar{

        padding:14px 12px !important;

    }


    .rago-dashboard-logo{

        margin-bottom:20px !important;

    }


    .rago-dashboard-logo h2{

        font-size:24px !important;

    }


    .rago-dashboard-main{

        padding:14px !important;

    }


    .rago-dashboard-header{

        gap:14px !important;

        margin-bottom:20px !important;

    }


    .rago-dashboard-header-right{

        gap:10px !important;

    }


    .rago-dashboard-profile{

        flex:1 !important;

        min-width:0 !important;

        padding:7px 10px !important;

    }


    .rago-dashboard-user{

        min-width:0 !important;

    }


    .rago-dashboard-user strong{

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;

    }


    .rago-dashboard-welcome{

        padding:18px !important;

        min-height:auto !important;

    }


    .rago-dashboard-welcome h1{

        font-size:22px !important;

    }


    .rago-dashboard-welcome p{

        font-size:12px !important;

    }


    .rago-dashboard-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;

    }


    .rago-dashboard-card{

        min-height:130px !important;

        padding:14px !important;

    }


    .rago-dashboard-card-icon{

        width:38px !important;

        height:38px !important;

    }


    .rago-dashboard-card strong{

        font-size:22px !important;

    }


    .rago-dashboard-tool{

        padding:14px !important;

    }


    .rago-dashboard-tool-left{

        width:100% !important;

    }


    .rago-dashboard-tool-right{

        width:100% !important;

        margin-top:12px !important;

    }


    .rago-dashboard-plan-card{

        padding:16px !important;

    }


    .rago-dashboard-plan-header{

        flex-direction:column !important;

    }


    .rago-dashboard-plan-footer{

        flex-direction:column !important;

        align-items:stretch !important;

    }


    .rago-dashboard-upgrade{

        width:100% !important;

    }


    .rago-dashboard-downloads,
    .rago-dashboard-activity,
    .rago-dashboard-notifications{

        padding:16px !important;

        border-radius:16px !important;

    }

}


@media (max-width: 576px){

    .rago-dashboard{

        min-height:100vh !important;

    }


    .rago-dashboard-main{

        padding:12px !important;

    }


    .rago-dashboard-stats{

        grid-template-columns:1fr 1fr !important;

        gap:8px !important;

    }


    .rago-dashboard-card{

        min-height:120px !important;

        padding:12px !important;

        border-radius:12px !important;

    }


    .rago-dashboard-card h3{

        font-size:12px !important;

    }


    .rago-dashboard-card strong{

        font-size:20px !important;

    }


    .rago-dashboard-card small{

        font-size:10px !important;

    }


    .rago-dashboard-tool{

        gap:12px !important;

    }


    .rago-dashboard-tool-left{

        gap:10px !important;

    }


    .rago-dashboard-tool-left h3{

        font-size:14px !important;

    }


    .rago-dashboard-tool-left p{

        font-size:11px !important;

    }


    .rago-dashboard-tool-icon{

        width:44px !important;

        height:44px !important;

        font-size:18px !important;

    }


    .rago-dashboard-tool-right{

        flex-wrap:wrap !important;

    }


    .rago-dashboard-tool-right button{

        flex:1 !important;

        min-width:120px !important;

    }


    .rago-dashboard-list{

        gap:10px !important;

        padding:13px 0 !important;

    }


    .rago-dashboard-list strong{

        font-size:13px !important;

    }


    .rago-dashboard-list small{

        font-size:11px !important;

    }


    .rago-dashboard-list div:last-child{

        font-size:11px !important;

    }

}