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

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

:root{
    --sidebar-width:210px;
    --sidebar-mini:72px;
    --sidebar-bg:#fff;
    --sidebar-border:#ececec;
    --sidebar-text:#333;
    --sidebar-icon:#666;
    --sidebar-hover:#f7f7f7;
    --sidebar-active:#fff2f2;
    --primary:#E53935;

}

/*=====================================
Material Symbols
=====================================*/

.material-symbols-rounded{
    font-family:"Material Symbols Rounded";
    font-weight:400;
    font-style:normal;
    font-size:20px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    flex-shrink:0;
}

/*=====================================
Sidebar
=====================================*/

.home5-sidepanel{

    position:fixed;

    top:72px;

    left:0;

    width:210px;

    height:calc(100vh - 72px);

    background:#fff;

    transition:transform .30s ease;

}
/*=====================================
Logo
=====================================*/

.sidebar-top{

    padding:4px 0;

    flex-shrink:0;

}

.home5-logo{

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

}

.home5-logo img{

    width:90px;
    height:auto;

}

/*=====================================
Navigation
=====================================*/

.home5-sidepanel-nav{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:4px 8px;

    overflow:hidden;

}

.menu-items{

    display:flex;

    flex-direction:column;

    gap:1px;

}

.logout-section{

    margin-top:auto;

}
/*=====================================
Sections
=====================================*/

.menu-items{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.logout-section{

    margin-top:auto;

}

/*=====================================
Menu Links
=====================================*/

.home5-sidepanel-link{

    display:flex;
    align-items:center;
    gap:14px;

    width:100%;

    height:48px;

    padding:0 20px;

    border-radius:0;

    background:transparent;

    text-decoration:none;

    color:var(--sidebar-text);

    font-size:15px;
    font-weight:500;

    transition:all .2s ease;

}

.home5-sidepanel-link:hover{

    background:#f7f7f7;

    color:var(--primary);

}

.home5-sidepanel-link:hover .material-symbols-rounded{

    color:var(--primary);

}
.home5-sidepanel-link.active{

    background:#fff5f5;

    border-left:4px solid var(--primary);

    color:var(--primary);

    font-weight:600;

    padding-left:16px;

}

.home5-sidepanel-link.active .material-symbols-rounded{

    color:var(--primary);

}

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

.logout-link{

    color:var(--primary);

}

.logout-link .material-symbols-rounded{

    color:var(--primary);

}

/*=====================================
Close Button
=====================================*/

.sidebar-close{

    display:none;

    position:absolute;

    top:10px;

    right:10px;

    background:none;

    border:none;

    cursor:pointer;

}

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

.sidebar-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1090;

}

.sidebar-overlay.active{

    opacity:1;

    visibility:visible;

}

/*=====================================
Content
=====================================*/

.main-wrapper,
.main-content,
.wrapper{

    margin-left:230px;
     margin-top:72px;

    transition:.3s;

}

/*=====================================
Tablet
=====================================*/

@media (max-width:1199px){

    .home5-sidepanel{

        width:72px;

    }

    .main-wrapper,
    .main-content,
    .wrapper{

        margin-left:72px;

    }

    .home5-logo img{

        width:88px;

    }

    .home5-sidepanel-link{

        justify-content:center;

        padding:0;

    }

    .home5-sidepanel-link span:last-child{

        display:none;

    }

}

/*=====================================
Mobile
=====================================*/

@media (max-width:767px){

    .home5-sidepanel{

        left:-220px;

        transition:.3s;

    }

    .home5-sidepanel.show{

        left:0;

    }

    .main-wrapper,
    .main-content,
    .wrapper{

        margin-left:0;

    }

    .home5-logo img{

        width:90px;

    }

    .home5-sidepanel-link{

        justify-content:flex-start;

        padding:0 12px;

    }

    .home5-sidepanel-link span:last-child{

        display:block;

    }

    .sidebar-close{

        display:block;

    }

}

.home5-sidepanel.hide{

    transform:translateX(-100%);

    transition:.30s ease;

}