﻿.menu {
    display: flex;
    max-width: 413px;
    padding: 32px;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: var(--Primary-Purple-20, #F0E4F5);
    overflow: hidden; /* Prevent sidebar from scrolling */
    position: fixed;
    height: 100vh; /* Full height */
}
    .menu .menu-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
        padding: 8px 16px;
    }

 .menu .menu-content .back-btn {
            display: flex;
            padding: 15px 24px;
            justify-content: center;
            align-items: center;
            gap: 5px;
            color: var(--CB-Purple-1000-9844BA, #9844BA);
            text-align: center;
            font-family: "Roboto Condensed";
            font-size: 23px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            background-color: transparent;
            border-radius: 10px;
            border: 3px solid var(--CB-Purple-1000-9844BA, #9844BA);
            width: fit-content;
        }

 .menu .menu-content .title {
            font-family: Montserrat;
            font-size: 38px;
            font-style: normal;
            font-weight: 800;
            line-height: 47px;
        }

.menu .menu-content .portal-sidenav {
            display: flex;
            height: 464px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

.menu .menu-content .portal-sidenav ul li {
                flex-direction: row;
                border-bottom: 1px solid var(--cbf-black-1000);
                align-items: center;
                align-self: stretch;
                padding: 8px;
                list-style-type: none !important;
                color: var(--Grey-1000, #000);
                font-family: Roboto;
                font-size: 23px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }

 .menu .menu-content .portal-sidenav ul li {
                display: flex;
                padding: 10px 0px;
                justify-content: flex-start;
                gap: 10px;
            }

 .menu .menu-content .portal-sidenav ul {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-left: 0;
            }

.menu .menu-content .portal-sidenav ul li a svg {
                    vertical-align: middle;
                    margin-right: 2px;
                    margin-bottom: 5px;
                    width: 24px;
                    height: 24px;
                    color: black;
                }
.portal-sidenav a.active {
    color: #9844BA !important; /* Highlight color */
    font-weight: bold !important;
}

    .portal-sidenav a.active svg path {
        fill: purple; /* Change SVG color when active */
    }


@media (max-width: 1024px) {

    .cbf-UserNav {
        display: none;
    }
    .usernav
    {
        width:0% !important;
    }
}