/* =====================================================
   METRO VENDOR DASHBOARD
   LAYOUT
===================================================== */

body.mvd-dashboard{

    background:#F5F6FB;
}

/* wrapper principal */

.mvd-wrapper{

    display:flex;
    min-height:100vh;
}

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

.mvd-sidebar{

    width:240px;
    min-width:240px;

    background:#24105D;

    padding:28px;

    color:#fff;
}

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

.mvd-content{

    flex:1;

    padding:40px 50px;

    background:#F5F6FB;

    overflow:hidden;
}

/* =====================================================
   CONTAINER
===================================================== */

.mvd-container{

    width:100%;
    max-width:1600px;

    margin:0 auto;
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1200px){

    .mvd-sidebar{

        width:90px;
        min-width:90px;
    }

    .mvd-content{

        padding:30px;
    }
}



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

.mvd-mobile-toggle{
    display:none;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
}

.mvd-sidebar-overlay{
    display:none;
}

@media(max-width:991px){

    .mvd-mobile-toggle{
        display:block;
        position:fixed;
        top:18px;
        left:18px;
        z-index:10002;
        background:#fff;
        width:42px;
        height:42px;
        border-radius:10px;
        box-shadow:0 10px 30px rgba(0,0,0,.1);
    }

    .mvd-sidebar{
        position:fixed;
        left:-280px;
        top:0;
        width:280px;
        height:100vh;
        z-index:10001;
        transition:.3s;
        overflow-y:auto;
    }

    .mvd-sidebar.active{
        left:0;
    }

    .mvd-sidebar-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        backdrop-filter:blur(4px);
        z-index:10000;
        display:none;
    }

    .mvd-sidebar-overlay.active{
        display:block;
    }

    .mvd-content{
        width:100%;
        margin-left:0;
        padding:20px;
    }
}