.allSideBar{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 17rem;
    z-index: 999;
    transition: right 0.3s ease, width 0.3s ease;
    background: black;
    overflow: hidden;
    .logoHeaderPanel{
        border-bottom: 1px solid rgba(240, 240, 255, 0.1);
        height: 5rem;
        display: grid;
        align-items: center;
        img{
            width: 17rem;
            height: 5rem;
            object-fit: contain;
        }
    }
    .sideSearch{
        padding: .5rem;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        grid-gap: .5rem;
        input{
            width: 100%;
            font-size: .8rem;
            font-weight: 300;
            color: black;
            padding: .3rem .5rem;
            border-radius: 5px;
            background: #F0F3F7;
            box-shadow: inset 0 0 5px rgba(0,0,0,.5);
        }
        button{
            font-size: .8rem;
            font-weight: 300;
            color: white;
            padding: .3rem .5rem;
            border-radius: 5px;
            background: $red;
            transition: all .3s ease-in-out;
            &:hover{
                background: darken($red,10);
            }
        }
    }
    .buttonSystem{
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: .5rem;
        grid-gap: .5rem;
        a{
            display: grid;
            padding: .3rem;
            border-radius: 5px;
            font-size: .7rem;
            font-weight: 300;
            text-align: center;
            color: white;
            background: $blue;
            &:hover{
                background: darken($blue,20);
            }
        }
    }
    .allSideBarItem{
        max-height: 88%;
        overflow-y: scroll;
        direction: ltr;
        padding-bottom: 3rem;
        scrollbar-width: 1rem;
        scrollbar-color: rgba(255,255,255,.1) transparent;
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(255,255,255,.1);
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,.1);
            border-radius: 10px;
            border: 3px solid rgba(255,255,255,.1);
        }
        .allSideBarIconsText{
            padding: 1rem 0;
            display: grid;
            direction: rtl;
            border-top: 2px solid #1c1c1c;
            div.active{
                height: 43px;
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                padding: 5px 10px;
                font-weight: 300;
                cursor: pointer;
                opacity: 1;
                font-size: 1rem;
                color: #d5d5d5;
                background: linear-gradient(to left, #273953, transparent);
                position: relative;
                z-index: 1;
                border-right: 5px solid #4676cd;
                i{
                    width: 2.1rem;
                    height: 2.1rem;
                    border-radius: 100%;
                    background: #4676cd;
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0 5px 5px rgba(0,0,0,.3);
                    svg{
                        width: 1rem;
                        height: 1rem;
                        fill: white;
                    }
                }
                .arrow{
                    background: transparent;
                    width: auto;
                    height: auto;
                    position: relative;
                    z-index: 100;
                    box-shadow: 0 0 0 0;
                    svg{
                        fill: #d5d5d5;
                        width: .7rem;
                        height: .7rem;
                        transition: all .3s ease-in-out;
                    }
                    .down{
                        transform: rotate(-90deg);
                    }
                }
                .sidemenu-label{
                    margin-right: .5rem;
                    text-align: right;
                }
            }
            h4{
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                grid-gap: .8rem;
                font-size: .95rem;
                font-weight: 500;
                color: #d5d5d5;
                margin: 0 1rem;
                cursor: pointer;
                opacity: .8;
                i{
                    display: grid;
                    align-items: center;
                    svg{
                        fill: #d5d5d5;
                        width: 1.2rem;
                        height: 1.2rem;
                    }
                }
                .arrow{
                    svg{
                        width: .75rem;
                        transition: all .3s ease-in-out;
                        height: .75rem;
                    }
                    .down{
                        transform: rotate(-90deg);
                    }
                }
            }
            ul{
                margin-right: 1.5rem;
                li{
                    margin-top: 1rem;
                    a{
                        display: grid;
                        grid-template-columns: auto auto;
                        justify-content: right;
                        align-items: center;
                        grid-gap: .5rem;
                        font-size: .8rem;
                        font-weight: 300;
                        color: #ccc;
                        i{
                            display: grid;
                            align-items: center;
                            svg{
                                fill: #bdbdbd;
                                width: .7rem;
                                height: .7rem;
                            }
                        }
                        &:hover{
                            color: #ccc;
                            margin-right: .5rem;
                            i{
                                svg{
                                    fill: #ccc;
                                }
                            }
                        }
                    }
                }
            }
        }
        .countData{
            background: red;
            padding: 0 .3rem;
            border-radius: 5px;
            color: white;
            font-size: .7rem;
            border: 1px solid white;
            box-shadow: 0 0 5px rgba(0,0,0,.1);
        }
    }
}
