.sidebar{

    display:flex;  
    position:fixed;
    left:0px;
    width:100%;
    height:100vh;
    max-width:70px;
    flex-grow:0;
    flex-shrink:0;
    height:100%;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
    background: linear-gradient(89deg, rgba(0,0,0,1) 0%, rgb(86 17 36) 100%);
    transition:300ms ease all;
    z-index:1999;
    overflow:hidden;
    color:white;
}

.sidebar 
{
    transition:300ms ease all;
}

.sidebar-navigation-sub
{
    border-left: 1px solid rgba(255,255,255,0.05);  
}

.sub-menu
{  
    overflow: hidden;
}

.sidebar:not(:hover) .sidebar-option.has-sub-menu::after
{
    display:none;
}


.sidebar:not(.sidebar-mobile ) .first-level
{
    width:100%;
    flex-shrink:0;
}

.sidebar:not(.sidebar-mobile ):hover .first-level
{
    width:300px;   
}

.sidebar .add-new-icon{ font-size:30px; opacity:0.2; }


.sidebar:not(.sidebar-mobile ):hover{ max-width:300px; }
.sidebar:not(.sidebar-mobile ).with-sub-menu:hover{ max-width:600px; }

.sidebar .logo-img{ height:15px; object-fit:cover; }

.sidebar.reduced .item .name{

    padding-left:0px;
    text-indent:120px;
    

}

.project-prefered-sidebar
{
    flex-grow: 0;  
}

.sidebar-navigation
{
    display: flex;
    flex-flow: column;
    overflow:auto;
    height: 100%;
}

.small-scrollbar::-webkit-scrollbar { width: 2px; }  
.small-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05)}
.small-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius:3px;  }

.sidebar-nav-list
{
    display: flex;
    overflow: hidden;
    flex-flow: column;
    flex-shrink: 1;
    flex-grow:1;

}

.sidebar-bottom
{
    flex-shrink: 1;
    flex-grow: 0;
}

.sidebar-option.project-icon:hover .sidebar-project-icon
{
    border:2px solid var(--orange);
}

.logo-mobile
{
    height:60%;
}

.sidebar-project-icon
{
    border-radius: 50%;
    height: 35px;
    border: 2px solid rgba(255,255,255,0.2);
    width: 35px;
    position: relative;
    left:-4px;
    flex-shrink:0;
}

.sidebar-option.project-icon .sidebar-text
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  
}

.sidebar-count
{
    color: var(--bar_font_color);
    background: var(--brand);
    border-radius: 50%;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    font-weight: bold;
    font-size: 9px;
    position: Absolute;
    bottom: 4px;
    left: 28px;
}

.sidebar-option.project-icon .sidebar-text .mini{ font-size:8px; }
.sidebar-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-left: 10px;
    line-height: 15px;
    text-transform: uppercase;
}

.sidebar.reduced .mini-heading .title{

    width:0px;
    padding:0px;
}

.sidebar.reduced .mini-heading .value{

    width:100%;
    text-align:center;
}

.sidebar .item{

    height:60px;
    border-bottom:1px solid rgba(0,0,0,0.1);
    margin-bottom:0px;
    transition:200ms ease all;
    background:var(--base_color);
    width:100%;

}

.sidebar .item:hover{

    background-color:var(--orange);
    color:white;
}

.sidebar .item .icon
{
    width:60px;
    height:100%;    
    flex-shrink:0;
}

.sidebar .item .name
{

    padding-left: 15px;
    display: flex;
    justify-content: flex-start;
    width: calc( 100% - 50px );
    font-family: Quicksand;
    font-size: 15px;
    font-weight: 800;
    align-items: center;
    height: 100%;
    overflow:hidden;
    transition:300ms ease all;

}

.sidebar .settings{

    width: 50px;
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    color:var(--bar_font_color);
    transition:300ms ease all;

}

.sidebar .settings:hover{

    color:white;
    font-size:23px;
    background-color:var(--alternate_color);
}

.sidebar .item .icon.standard{

    opacity:0.7;

}

.sidebar .item .icon.standard img{

    opacity:0.7;
    width:50%;
    height:50%;

}

.sidebar .item .icon img{

    height:50%;
    border-radius:50%;
    transition:300ms ease all;
    width:50%;
    object-fit:cover;

}

.sidebar .mini-heading{

    width: 100%;
    background: rgba(0,0,0,0.05 );
    color: var(--bar_font_color);    
    

}

.sidebar .mini-heading div{

    padding: 7px 10px 5px 10px;
}

.sidebar .mini-heading .title{

    font-size: 11px;
    font-weight: bold;
    text-align: left;
    overflow: hidden;
}

.sidebar .mini-heading .value{
    
    font-size: 11px;
    font-weight: bold;

}

.sidebar .item:hover{

    width: 110%;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
    border-radius: 0px 5px 5px 0px;
    overflow: hidden;
    z-index:999;
}

.sidebar .item.active{

    width: 110%;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
    border-radius: 0px 5px 5px 0px;
    overflow: hidden;
    z-index:999;    
    background-color:rgb(241 237 236);
   
}

.sidebar-option,
.sidebar a
{
    color:var(--bar_font_color) !important;
}

.sidebar .icon{
    height:30px;
    flex-shrink: 0;
}

.sidebar-option
{  
    padding:10px;
    display:flex;
    align-items: center;
    width:100%;
    cursor:pointer;   
    font-size:14px;
    font-weight:500;
    text-decoration: none;
    position:relative;
}

.sidebar-divider
{
    height:1px;
    background-color:#c7b0b029;
    flex-shrink:0;
    margin:8px 10px;
}

.sidebar-option.active,
.sidebar-option:hover
{
    background-color:rgba(255,255,255,0.05);
}

.sidebar-option:hover i:not(.secondary),
.sidebar-option.active i:not(.secondary)
{
    background-color:var(--light-orange);
    color: white;
    opacity:1;
}

.sidebar-option.has-sub-menu::after
{
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    right: 10px;
}

.sidebar-option i
{    
    height: 30px;
    flex-shrink: 0;
    width: 35px;
    padding: 5px 5px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.sidebar-mobile{ 
    height:60px; 
    z-index:9000; 
    max-width:100%;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;

}
.sidebar-mobile i{ margin:0px; }    

.sidebar-navigation-mobile {
    height: 100vh;
    overflow: auto;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    transform: translate3D(-100%,0,0);
    -webkit-transform: translate3D(-100%,0,0);
    opacity: 0;
    padding-top: 70px;
    transition: 500ms ease all;
    z-index: 1999;
    background: black;
}

.sidebar-navigation-mobile.opened
{
    opacity:1;
    transform: translate3D(0%,0,0);
    -webkit-transform: translate3D(0%,0,0);
}