/* $Id$ */

.cnportal_sidebar {
    position: fixed;
    height: 100%;
    width: 165px;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
    background: var(--color-light);
    transition: left 300ms;    
}
.cnportal_sidebar.hide {
	width: 60px;
}
.cnportal_sidebar.hide small{
    display: none
}
.cnportal_sidebar.hide img {
    width: 32px;
    height: 32px;
}
.cnportal_sidebar.hide .imgButton {
    width: 12px;
    height: 12px;
}
/* .sidebar-sub-menu {
    opacity: 1;
    display: block;
    transition: opacity 1.5s linear;
    transition: display 1.5s linear;
    background-color: #ddd;
} */
.sidebar-sub-menu {
    opacity: 1;
    /* display: block;     */
    background-color: #efefef;
    transition: opacity 200ms ease-in;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}
.sidebar-sub-menu.hide {
    transition: opacity 200ms ease-out;
    /* transition: heigth 500ms; */
    /* transition: max-heigth 1s ease-out; */
    opacity: 0.0;
    height: 0;
    overflow: hidden;
    /* display: block */
}
.side-menu li:hover {
    background-color: #f3f3f3;
}
.side-menu li.active {
    background-color: var(--secondary-color);
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid var(--main-color);
} 
.side-menu ul {
    text-align: center;
}
.side-menu a {
    display: block;
    padding: 1.2rem 0rem;
    color: #444
}
.side-menu li.active a {
    color: #333
}
.side-menu a span {
    display: block;
    text-align: center;
    font-size: 1.7rem;
}
.side-menu img {
    filter: grayscale(1) opacity(0.33);
}
/* .side-menu img:hover {
    filter: grayscale(0) opacity(1);
} */
.side-menu li:hover img {
    filter: grayscale(0) opacity(1);
}
.side-menu li.active img {
    filter: grayscale(0);
}
.sidebar-sub-menu img {
    filter: grayscale(0) opacity(1);
}