.sidebar-menu {
    float: left;
    height: calc(100dvh - var(--rnd-header-height));
    min-height: calc(100dvh - var(--rnd-header-height));
    box-shadow: 2px 2px 16px rgba(38, 55, 67, 0.1);
    width: 250px;
    z-index: 1; /* Stay on top */
    background-color: #FFFFFF;
    border-right: 1px solid rgba(23, 35, 76, 0.15);
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    position: relative;
    z-index: 3000;
}

    .sidebar-menu .sidebar-menu-item {
        height: 40px;
        border-radius: 0px;
        white-space: nowrap;
    }

        .sidebar-menu .sidebar-menu-item a {
            width: 100%;
            min-width: max-content;
            padding: 7px 0 7px 10px;
            display: inline-block;
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: var(--rnd-primary-colour);
            border-radius: 0px 8px 8px 0px;
        }

            .sidebar-menu .sidebar-menu-item a:hover,
            .sidebar-menu .sidebar-menu-item a:active,
            .sidebar-menu .sidebar-menu-item-active a {
                background: rgba(23, 35, 76, 0.15);
                box-shadow: 4px 4px 20px rgba(23, 35, 76, 0.07);
            }

            .sidebar-menu .sidebar-menu-item a svg {
                width: 24px;
                height: 24px;
            }

            .sidebar-menu .sidebar-menu-item a span {
                margin: 0 10px;
            }

        .sidebar-menu .sidebar-menu-item.user-control {
            height: auto;
            line-height: 6px;
            background: #FFF;
            border-bottom: 1px solid #D6D5E3;
            margin-right: 0px;
            border-radius: 0px;
            padding-top: 30px;
            padding-bottom: 30px;
        }

            .sidebar-menu .sidebar-menu-item.user-control:hover {
                background: #ceced5;
                box-shadow: none;
            }

            .sidebar-menu .sidebar-menu-item.user-control a:hover {
                background: inherit;
                box-shadow: none;
            }

            .sidebar-menu .sidebar-menu-item.user-control a {
                border-radius: 0px;
                padding: 10px 0 10px 12px
            }

            .sidebar-menu .sidebar-menu-item.user-control a {
                width: calc(100% - 5px);
            }

        .sidebar-menu .sidebar-menu-item .user-name {
            border-radius: 0px;
            margin: 0px 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            padding-top: 5px;
        }

        .sidebar-menu .sidebar-menu-item .user-email {
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-menu .sidebar-menu-item.user-control .user-img {
            display: inline-block;
            margin-right: 5px;
            float: left;
        }

            .sidebar-menu .sidebar-menu-item.user-control .user-img img {
                width: 48px;
                height: 48px;
                border-radius: 24px;
                border: 1px solid rgba(255, 255, 255, 0.5);
            }

    .sidebar-menu .accordion-button {
        padding-left: 15px;
    }

.menu-open-button {
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
    color: white;
    padding: 10px 15px;
    border: none;
    height: 48px;
    border-radius: var(--rnd-border-radius);
}

    .menu-open-button:hover {
        background-color: #4C5D96;
    }

@media (max-width: 767px) {
    .sidebar-menu {
        height: 0;
        position: fixed;
        width: 0;
    }
}