.divSideBar {
    background: rgba(255,255,255,1);
    border-radius: 0.4em;
    box-shadow: var(--shadow-style);    
    display: grid;
    transition: 0.5s;
    z-index:2;
}

.divSideBarLayout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: fit-content;
    z-index: 2;
}

    .divSideBarHide {
        width: 0;
    }

.divSideBarShow {
    width: 16em;
}

.divNavBar {
    margin: 1em;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
}

.navlogoarea{
    display:flex;
    justify-content:center;
}

.divNavBar img.logo {
    display: block;
    width: 205px;
    height: auto;
}

.divPortalLogo {
    position: relative;
}

    .divPortalLogo button {
        position: absolute;
        top: 50%;
        right: -40px;
        transform: translateY(-50%);
        border-radius: 50%;
        height: 30px;
        width: 30px;
        border: 0;
        outline: 0;
        background: #fff;
        color: #555;
        box-shadow: var(--shadow-style);
        transition: 0.5s;
    }

        .divPortalLogo button:hover {
            cursor: pointer;
            color:#fff;
            background: var(--primary-color);
        }

        .hlogo {
            display: block;
        }

.divAppClass {
    text-align: center;
    font-weight:bolder;
    letter-spacing:0.05em;
    color: #AABBAA;    
}

.mlogo {
    display: none;
}

.navlogoarea {
    display: flex;
    flex-direction: column;
    gap:1em;
}

.navItems {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 12em;
}

    .navItems li {
        list-style-type: none;
        padding: 0.5em 0 0.5em 0;
        min-width: 10em;
        color: #333;
    }

        .navItems li a {            
            transition: 0.2s;
        }

            .navItems li ul li a:hover {
                color: var(--primary-color);
                cursor: pointer;
            }

        .navItems li active a {
            color: var(--primary-color);
        }

            .navItems li a i {
                font-size: 1.5em;
                padding-right: 0.4em;
            }

    .navItems ul.ParentList li {
        font-size: 1em;
    }

    .navItems ul.ChildList li {
        font-size: 0.9em;
    }

    .navItems ul {        
        padding-left: 0;
    }

.ParentList {
    display: flex;
    flex-direction: column;
    align-self: center;
}

    .ParentList li div:not(treeitem) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .ParentList li div:hover * {
            color: var(--primary-color);
            cursor:pointer;
        }

        .ParentList li div button {
            border: 0;
            background: none;
        }

            .ParentList li div button i {
                font-size:1.3em;
                color: #999;
            }

            .ParentList ul {
                padding-left: 1.5em;
            }

    .ParentList li div.treeitem{
        display:flex;
        align-items:center;
        justify-content:flex-start;
    }

        .ParentList li div.treeitem div:first-child {
            width: 30px;
            padding-left: 5px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }

            .ParentList li div.treeitem div:first-child i {
                width: 28px;
                height: auto;
            }

            .arrow {
                display: inline-block;
                width: 0.5rem;
                height: 0.5rem;
                margin-right: 0.5rem;
                transition-duration: 0.3s;
            }

.arrow-expanded {
    transform: rotate(90deg);
}

.poweredby
{
    display:flex;    
    gap:0;
    justify-content:right;
    align-items:center;
    /*margin-right:2em;*/
}

    .poweredby .VBar{
        padding:0.5em 1em;
    }

    .poweredby .VBar div {
        width:0.085em;
        height: 24px;
        background: #777;
    }

.poweredbytext {
    display: flex;
    gap: 0;
    align-items: center;    
    font-weight: 100;
    font-style: normal;
    font-size: 0.7em;
    color: #3F4363;
    width: fit-content;
}

    .poweredbytext div {
        width: fit-content;
    }

.poweredbylogo {
    display: flex;
    justify-content: right;
    align-items: center;
}

    .poweredbylogo img {
        height: 2.2em;
        width: auto;
    }

.hBar {
    /*height: 1px;
    width: 25px;
    margin-right: 0.5em;
    background: #3F436390;*/
}

    .hBar i {
        color: #3F436390;
        padding-right:0.5em;
    }
@media only screen and (max-width:750px) {
 
}

    @media only screen and (max-width:820px) {
        .hlogo {
            display: none;
        }

        .mlogo {
            display: block;
        }   
    }

    @media only screen and (max-width: 1365px) {
        .divSideBar {
            width: 0em;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            height:fit-content;
        }

        .divNavBar {
            opacity: 0;
            visibility: hidden;
        }

        .divSideBarOverlay {
            background: rgba(255,255,255,1);
            border-radius: 0.4em;
            box-shadow: var(--shadow-style);
            display: flex;
            justify-content: center;
            transition: 0.5s;
            width: 14em;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            height: fit-content;
        }

        .divNavBarOverlay {
            margin: 1em;
            opacity: 1;
            visibility: visible;
        }

            .divNavBarOverlay > button {
                margin: 0.5em;
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                border: none;
                background: transparent;
                color: #888;
            }

                .divNavBarOverlay > button:hover {
                    color: #2CBC0A;
                    cursor: pointer;
                }

            .divNavBarOverlay img.logo {
                display: block;
                margin: auto;
                height: 8em;
                width: auto;
            }       
    }