/*==================================================
    VELOX MENU
==================================================*/

:root{

    --menu-width:300px;
    --menu-bg:#fff;
    --menu-border:#ececec;
    --menu-hover:#f8f8f8;
    --primary:#E53935;

}

/*=====================================
Menu Panel
=====================================*/

.velox-menu-panel{

    width:var(--menu-width);

    background:#fff;

    border-right:1px solid var(--menu-border);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

/*=====================================
Profile
=====================================*/

.velox-menu-profile{

    display:flex;

    align-items:center;

    gap:15px;

    padding:25px;

}

.velox-menu-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#f2f2f2;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#999;

}

.velox-menu-user h5{

    margin:0;

    font-size:20px;

    font-weight:600;

}

.velox-menu-user a{

    color:green;

    text-decoration:none;

    font-size:15px;

}

/*=====================================
Items
=====================================*/

.velox-menu-item{

    display:flex;

    align-items:center;

    gap:18px;

    height:52px;

    padding:0 25px;

    color:#222;

    text-decoration:none;

    transition:.2s;

}

.velox-menu-item:hover{

    background:var(--menu-hover);

}

.velox-menu-item i{

    width:22px;

    font-size:20px;

}

.velox-menu-item span{

    font-size:17px;

}

/*=====================================
Logout
=====================================*/

.velox-menu-logout{

    color:var(--primary);

}

.velox-menu-panel hr{

    margin:10px 0;

}


/*=====================================
Menu Panel
=====================================*/

.velox-menu-panel{

    position:fixed;

    top:72px;

    left:-340px;

    width:300px;

    height:calc(100vh - 72px);

    background:#fff;

    overflow-y:auto;

    transition:left .30s ease;

    z-index:1300;

}

.velox-menu-panel.show{

    left:0;

}


/*==============================
Overlay
==============================*/

.velox-menu-overlay{

    position:fixed;

    top:72px;
    left:0;
    right:0;
    bottom:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.25s ease;

    z-index:1250;

}

.velox-menu-overlay.show{

    opacity:1;

    visibility:visible;

}