/*==================================================
DASHBOARD.CSS
Voice Of Mohan LMS
PART 1/2
==================================================*/

/*==================================================
1. PAGE AND DIVI RESET
==================================================*/

#main-content{
background:#F6F8FB;
}

#masteriyo-account-page{
width:100%;
min-height:650px;
padding:28px 0 45px;
color:#172033;
}

#masteriyo-account-page *{
box-sizing:border-box;
}

#masteriyo-account-page .chakra-container{
max-width:none;
}

#main-content .et_pb_section_0{
padding:0!important;
}

#main-content .et_pb_row_0{
width:96%!important;
max-width:1440px!important;
margin:0 auto!important;
padding:0!important;
}

#main-content .et_pb_text_0,
#main-content .et_pb_text_inner{
margin:0!important;
padding:0!important;
}

#main-content .et_pb_text_inner>p:first-child,
#main-content .et_pb_text_inner>p:last-child{
display:none!important;
}

/*==================================================
2. ACCOUNT LAYOUT
==================================================*/



/*==================================================
3. SIDEBAR
==================================================*/


/*==================================================
4. SIDEBAR MENU
==================================================*/

#masteriyo-account-page .mto-account-sidebar ul{
display:flex!important;
flex-direction:column!important;
gap:5px!important;
margin:0!important;
padding:0!important;
list-style:none!important;
}

#masteriyo-account-page .mto-account-sidebar li{
margin:0!important;
padding:0!important;
}

#masteriyo-account-page .mto-account-sidebar li>a{
display:flex!important;
align-items:center!important;
width:100%!important;
min-height:46px!important;
padding:0 13px!important;
border-radius:10px!important;
color:#475467!important;
text-decoration:none!important;
transition:background-color .2s ease,color .2s ease,transform .2s ease!important;
}

#masteriyo-account-page .mto-account-sidebar li>a:hover{
background:#F1F5FA!important;
color:#0B2A4A!important;
transform:translateX(2px)!important;
}

#masteriyo-account-page .mto-account-sidebar li>a.active{
background:#0B2A4A!important;
color:#FFFFFF!important;
box-shadow:0 8px 20px rgba(11,42,74,.18)!important;
}

#masteriyo-account-page .mto-account-sidebar li>a.active svg,
#masteriyo-account-page .mto-account-sidebar li>a.active p{
color:#FFFFFF!important;
fill:currentColor!important;
}

#masteriyo-account-page .mto-account-sidebar li svg{
width:20px!important;
height:20px!important;
min-width:20px!important;
color:currentColor!important;
}

#masteriyo-account-page .account-sidebar-menu-item{
margin:0!important;
color:inherit!important;
font-size:14px!important;
line-height:1.4!important;
font-weight:600!important;
white-space:nowrap!important;
}

/* Logout */
#masteriyo-account-page .mto-account-sidebar li:last-child>a{
margin-top:6px!important;
color:#B42318!important;
}

#masteriyo-account-page .mto-account-sidebar li:last-child>a:hover{
background:#FFF3F2!important;
}

/*==================================================
5. MAIN CONTENT
==================================================*/

#masteriyo-account-page .mto-account-wrapper{
width:100%!important;
min-width:0!important;
margin:0!important;
padding:6px 4px 20px!important;
background:transparent!important;
}

/* Dashboard heading */
#masteriyo-account-page .mto-account-wrapper>div>div:first-child{
margin-bottom:26px!important;
}

#masteriyo-account-page .mto-account-wrapper>div>div:first-child p:first-of-type{
margin:0 0 5px!important;
color:#0B2A4A!important;
font-size:30px!important;
line-height:1.2!important;
font-weight:800!important;
letter-spacing:-.4px!important;
}

#masteriyo-account-page .mto-account-wrapper>div>div:first-child p:last-of-type{
margin:0!important;
color:#667085!important;
font-size:15px!important;
line-height:1.6!important;
}

/* Mobile menu button hidden on desktop */


/*==================================================
6. COURSE STATS
==================================================*/

#masteriyo-account-page .mto-dashboard-courses-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:18px!important;
width:100%!important;
margin:0 0 30px!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div{
display:flex!important;
align-items:center!important;
gap:15px!important;
min-height:108px!important;
padding:22px!important;
background:#FFFFFF!important;
border:1px solid #E4EAF1!important;
border-radius:16px!important;
box-shadow:0 8px 25px rgba(15,42,68,.055)!important;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div:hover{
transform:translateY(-2px)!important;
border-color:#CAD6E2!important;
box-shadow:0 13px 30px rgba(15,42,68,.09)!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div>div:first-child{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
margin:0!important;
border-radius:12px!important;
background:#EDF4FF!important;
color:#2767C5!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats svg{
width:24px!important;
height:24px!important;
color:inherit!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div>div:last-child{
display:flex!important;
flex-direction:column!important;
gap:3px!important;
margin:0!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div>div:last-child p:first-child{
margin:0!important;
color:#0B2A4A!important;
font-size:24px!important;
line-height:1.1!important;
font-weight:800!important;
}

#masteriyo-account-page .mto-dashboard-courses-stats>div>div:last-child p:last-child{
margin:0!important;
color:#667085!important;
font-size:13px!important;
line-height:1.4!important;
font-weight:600!important;
}

/*==================================================
DESKTOP ACCOUNT LAYOUT ONLY
==================================================*/

@media (min-width:981px){

    #masteriyo-account-container{
        display:grid!important;
        grid-template-columns:250px minmax(0,1fr)!important;
        gap:28px!important;
        align-items:start!important;
        width:100%!important;
        margin:0!important;
    }

    #masteriyo-account-page .mto-account-sidebar{
        position:sticky!important;
        top:24px!important;
        width:250px!important;
        min-width:250px!important;
        height:auto!important;
        padding:18px 14px!important;
        background:#FFFFFF!important;
        border:1px solid #E3E9F0!important;
        border-radius:18px!important;
        box-shadow:0 12px 35px rgba(15,42,68,.07)!important;
        overflow:visible!important;
    }

    #masteriyo-account-page button[aria-label="Toggle menu"]{
        display:none!important;
    }

}
/*==================================================
7. CONTINUE STUDYING
==================================================*/

#masteriyo-account-page .mto-dashboard-courses-progress{
background:#FFFFFF!important;
border:1px solid #E4EAF1!important;
border-radius:18px!important;
padding:28px!important;
box-shadow:0 10px 28px rgba(15,42,68,.06)!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress>div:first-child{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
margin-bottom:28px!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress p:first-child{
margin:0!important;
font-size:26px!important;
font-weight:800!important;
color:#0B2A4A!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress .chakra-button{
height:44px!important;
padding:0 18px!important;
border-radius:10px!important;
background:#FFFFFF!important;
border:1px solid #D6DEE8!important;
color:#0B2A4A!important;
font-weight:600!important;
box-shadow:none!important;
transition:.25s!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress .chakra-button:hover{
background:#0B2A4A!important;
color:#FFFFFF!important;
border-color:#0B2A4A!important;
}

/*==================================================
8. EMPTY STATE
==================================================*/

#masteriyo-account-page .mto-dashboard-courses-progress .css-en-ssitt3{
padding:70px 20px!important;
text-align:center!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress svg{
max-width:220px!important;
height:auto!important;
margin-bottom:25px!important;
opacity:.9;
}

#masteriyo-account-page .mto-dashboard-courses-progress .css-en-1luh3e9{
margin:0 0 25px!important;
font-size:17px!important;
color:#667085!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress .css-en-1f5g571{
height:50px!important;
padding:0 26px!important;
border:none!important;
border-radius:12px!important;
background:#0B2A4A!important;
color:#FFFFFF!important;
font-size:15px!important;
font-weight:700!important;
box-shadow:0 10px 25px rgba(11,42,74,.18)!important;
transition:.25s!important;
}

#masteriyo-account-page .mto-dashboard-courses-progress .css-en-1f5g571:hover{
background:#17406D!important;
transform:translateY(-2px)!important;
}

/*==================================================
9. NOTIFICATION
==================================================*/

#masteriyo-account-page .css-en-l7a6dm{
background:#E53935!important;
color:#FFFFFF!important;
font-size:11px!important;
font-weight:700!important;
border:2px solid #FFFFFF!important;
box-shadow:0 4px 12px rgba(229,57,53,.35)!important;
}

#masteriyo-account-page .css-en-1ra6ehi{
color:#667085!important;
}

/*==================================================
10. SCROLLBAR
==================================================*/

#masteriyo-account-page ::-webkit-scrollbar{
width:8px;
height:8px;
}

#masteriyo-account-page ::-webkit-scrollbar-thumb{
background:#C8D2DD;
border-radius:20px;
}

#masteriyo-account-page ::-webkit-scrollbar-thumb:hover{
background:#AEBCCB;
}

/*==================================================
TABLET AND MOBILE
==================================================*/

@media (max-width:980px){

    /*
     * Important:
     * Do not control Masteriyo sidebar position, width,
     * display, flex or overflow on mobile.
     */

    #masteriyo-account-page{
        padding:20px 0 35px!important;
    }

    #masteriyo-account-page .mto-account-wrapper{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-stats{
        grid-template-columns:1fr!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress{
        padding:20px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress>div:first-child{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:15px!important;
    }
}

@media (max-width:767px){

    #masteriyo-account-page .mto-account-wrapper>div>div:first-child p:first-of-type{
        font-size:26px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-stats>div{
        min-height:auto!important;
        padding:18px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress{
        padding:18px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress p:first-child{
        font-size:22px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress .css-en-ssitt3{
        padding:45px 10px!important;
    }

    #masteriyo-account-page .mto-dashboard-courses-progress svg{
        max-width:170px!important;
    }
}
/*==================================================
13. ANIMATION
==================================================*/

#masteriyo-account-page .mto-dashboard-courses-stats>div,
#masteriyo-account-page .mto-dashboard-courses-progress,
#masteriyo-account-page .chakra-button{
    transition:all .25s ease!important;
}
/* Hide Search + Category + Pricing filters */
#masteriyo-account-page form{
    display:none !important;
}