.UserLayout {
    .sidebar {
        .sidebarMenu {
            background-image: linear-gradient(180deg, #3772E3 0%, #012766 103.3%);
            min-height: 100vh;
            overflow-x: hidden;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            @media (min-width : 992px) {
                border-radius: 20px;  
                padding: 10px 0px;
            }
            
        }
    }

    .profile {
        width: calc(100% - 2rem);
        background: linear-gradient(180deg, #5189F4 48.96%, #3670DF 100%);
        border-radius: 14px;

        .content {
            border-radius: 14px;
            position: relative;
            z-index: 1;
            &::after{
                content : "";
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: -1;
                border-radius: 14px;
                opacity: 0.8;
                background-color: #052C6E;
            }
        }
    }

    .navItems {

        li {
            >a {
                position: relative;
                border-radius: 0 1rem 1rem 0;

                span {
                    opacity: 0;
                }

                &.active span {
                    opacity: 1;
                }

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    pointer-events: none;
                    display: none;
                }

                &::before {
                    top: -30px;
                    box-shadow: -15px 15px 0 0px white;
                }

                &::after {
                    bottom: -30px;
                    box-shadow: -15px -15px 0 0px white;
                }

                &.active::before,
                &.active::after {
                    display: block;
                }
            }

            >.accordion {
                --bs-bg-opacity: 0;
                border-radius: 0 1rem 1rem 0;
                background-color: transparent;

                transition: background-color 250ms;

                .accordionToggler {
                    color: white;
                    border-radius: inherit;
                    background-color: transparent;

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        pointer-events: none;
                        display: none;
                    }

                    &::before {
                        top: -30px;
                        box-shadow: -15px 15px 0 0px white;
                    }

                    &::after {
                        bottom: -30px;
                        box-shadow: -15px -15px 0 0px white;
                    }
                }

                .accordionCollapse {
                    border-radius: inherit;
                    height: 0;
                    overflow: hidden;
                    transition: 250ms linear;

                    .accordionBody {
                        padding: 0.5rem 1rem;

                        div a span {
                            opacity: 0;
                            transition: 250ms;
                        }

                        div a.active span {
                            opacity: 1;
                        }
                    }
                }

                &.active {
                    --bs-bg-opacity: 0.25;
                    background-color: #2E71EB8F;
                    .accordionToggler {
                        background-color: white;
                        color: #FF7900;

                        &::before,
                        &::after {
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .breadcrumb {
        .active {
            color: var(--bs-info);
        }
    }

    @media (max-width: 992px) {
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            display: flex;
            transition: background-color 250ms;
            pointer-events: none;

            .hideBtn {
                flex: 1;
                opacity: 0;
                min-width: 0;
            }

            .sidebarMenu {
                width: 300px;
                height: 100%;
                overflow-x: hidden;
                background-color: white;
                transition: transform 250ms;
                transform: translateX(100%);
            }

            &.active {
                background-color: rgba(0, 0, 0, 0.5);
                pointer-events: all;

                .sidebarMenu {
                    transform: translateX(0%);
                }
            }
        }
    }

}