//@import "../_old/variables";
@import "../_new-variables.scss";

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar {
    height: 100%;
    background: white;
    border-right: 1px solid #DFEAF7;
    padding: 36px 0 0 24px;
    .requests-counter {
        border-radius: 50%;
        display: flex;
        font-size: 1rem;
        position: relative;
        content: "4";
        width: 15px;
        height: 15px;
        left: 155px;
        top: -22px;
        background-color: #ee6969;
        color: white;
        justify-content: center;
        align-items: center;
    }
    .logo-container {
        display: flex;
        align-items: flex-start;
        min-height: 55px;
        height: max(55px, 16vh);
    }
    .ul-container{
        height: min(750px, 62vh);
        min-height: 7vh;
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */
        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
            background: #888;
        }

        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .nav {
            list-style: none;
            max-height: 750px;
            overflow-y: auto;
            overflow-x: hidden;



            #management-requests {
                height: 18px;


            }

            //FIRST LEVEL
            & > li {
                color: #040059;
                font-size: 12px;
                font-weight: bold;
                margin-bottom: 20px;


                &.active-parent {
                    & > ul {
                        display: block;
                        max-height: 126px;

                        width: 225px;
                        overflow-x: hidden;
                        overflow-y: auto;

                        &::-webkit-scrollbar {
                            width: 10px;
                        }

                        /* Track */
                        &::-webkit-scrollbar-track {
                            background: #f1f1f1;
                        }

                        /* Handle */
                        &::-webkit-scrollbar-thumb {
                            background: #888;
                        }

                        /* Handle on hover */
                        &::-webkit-scrollbar-thumb:hover {
                            background: #555;
                        }
                    }
                }
            }

            //SECOND LEVEL
            & > li > ul {

                margin-top: min(2.7vh,30px);
                display: none;
                //margin-left: 10px;
                padding-left: 12px;
                border-left: 2px solid #1A73E8;
                max-height: 146px;


                overflow-x: hidden;
                overflow-y: auto;

                &::-webkit-scrollbar {
                    width: 10px;
                }

                /* Track */
                &::-webkit-scrollbar-track {
                    background: #f1f1f1;
                }

                /* Handle */
                &::-webkit-scrollbar-thumb {
                    background: #888;
                }

                /* Handle on hover */
                &::-webkit-scrollbar-thumb:hover {
                    background: #555;
                }

                & > li {
                    font-size: 11px;
                    margin-bottom: min(20px,1.8vh);
                    padding-left: 10px;

                    &:last-child {
                        margin-bottom: 0px;
                    }
                }

            }


            & li.active {
                color: #1A73E8;
                position: relative;

                &:after {
                    position: absolute;
                    content: "";
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    left: 0px;
                    top: 6px;
                    background-color: #1A73E8;
                }
            }
        }

        .top-level > li {
            margin-bottom: min(6.4rem,5vh);
            padding-left: 10px;
        }
    }



}