/*sidebar navigation*/
.sidebar a {
    color:rgba(255,255,255,.65);
    text-transform: uppercase;
}

.sidebar a:hover,
.sidebar a.active{
    color:white;
    text-shadow: 0 0 5px black;
}


.app-region-item .nav-link{
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 8px;
}
.app-region-item .nav-link.active{
background: rgba(255,255,255,.10)!important;
}


.app-region-name{
    margin-left:25px;
    display: block;
    font-size: 11px;
}

.app-region-img{
    position:absolute;
    max-width: 14px;
}

/* menu-item */
.app-menu-item{
    transition: all .4s ease;
    border-radius: 8px!important;
    color:rgba(255,255,255,.7);
    font-size: 11px;
    text-transform: uppercase;
  
}
.app-menu-item.active{
    background:rgba(255,255,255,.10)!important;
    font-weight:bold;
}
.app-menu-item:hover{
    color:white;
}

.app-sidebar-col{
    /*max-height: 335px;*/
    overflow:auto
}
@media (min-width: 1200px){
    .app-sidebar-col{
        transition: max-width .35s;
    }
}


.child-toggler{
    z-index: 10;
    top: -4px;
    
}

.app-sidebar-col .collapse{
    transition: height.35s;
    overflow: hidden;
}

.app-sidebar-col:not(:hover) .sidebar-hidden .collapse{
    height:0!important;
}

.app-sidebar-col:not(:hover)  .sidebar-hidden .child-toggler{
    display: none;
}

.app-sidebar-col::-webkit-scrollbar,
#sidebarMenu::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    background-color: transparent;
  }
  
.app-sidebar-col::-webkit-scrollbar-thumb,
#sidebarMenu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(116,129,148,.3);

  }

/*@media (max-width: 1205px){
    .app-sidebar-col{
        max-width: 43px!important;
    }
}*/

@media (max-width: 1200px){
    #app-theme{
        padding-bottom:100px!important
    }
}

@media (max-width: 991px){

    .app-logo-col{
        max-width: 100%!important;
    }
}

.app-sidebar-col:hover{
    max-width: 180px!important;
}




.navbar-vertical-toggle {
    display: none;
}



.navbar-toggle-icon:before {
    top: .3125rem;
}

.navbar-toggle-icon:after {
    top: .625rem;
}


.navbar-toggle-icon:after, .navbar-toggle-icon:before {
    content: '';
    position: absolute;
    height: .125rem;
    background-color: #fff;
    left: 0;
    transition: all .2s ease-in-out;
    border-radius: .25rem;
    width: 100%;
}
.navbar-toggle-icon:before {
    content: '';
    position: absolute;
    height: .125rem;
    background-color: #fff;
    left: 0;
    transition: all .2s ease-in-out;
    border-radius: .25rem;
    width: 100%;
}

.navbar-toggle-icon .toggle-line {
    display: block;
    height: 100%;
    border-radius: .25rem;
    transition: all .2s ease-in-out;
    background-color: #fff;
}


.navbar-toggle-icon {
    position: relative;
    height: .125rem;
    width: 1.25rem;
    transition: all .2s ease-in-out;
    display: block;
    top: -.3125rem;
    padding-right: 0;
}


.navbar-toggler-humburger-icon {
    height: 2.5rem;
    width: 2.5rem;
    padding: .3125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

@media (min-width: 1200px){
    .navbar-vertical-toggle {
        display: flex;
    }
    .navbar-toggle-icon {
        padding-right: .3125rem;
    }

    .navbar-toggle-icon:before {
        width: 50%;
    }

    .navbar-toggle-icon:after {
        width: 75%;
    }
}


@media (max-width: 1200px){

    .app-sidebar-col{
        max-width: 0;
        transition: all .35s;
        overflow: hidden;
    }

    .app-sidebar-col{
        position:fixed;
        top: 0;
        left: 0;
        width: 260px!important;
        max-width: 260px!important;
        display: block!important;
        z-index: 1040;
        height: 100%;
        max-height: 100%;
        left: -260px;
        box-shadow: 0 0 15px black;
    }
    
    .app-sidebar-col:hover{
        max-width: 260px!important;
    }


    .app-sidebar-col #sidebarMenu{
        /* max-width: 260px!important; */
        height: 100%!important;
        background: #191919;
        
        position: absolute;
        z-index: 100;
        padding: 10px 20px 10px;
        overflow: auto;
        
        width: 260px;
        transition: left .4s!important;
    }

    .tablet-side .app-sidebar-col{
        left:0!important
    }

    .app-sidebar-col .app-region-item .nav-link{
        padding: 10px;
    }

    
    .tablet-side .app-sidebar-col .app-region-item .child-toggler{
        top:0!important
    }

    .app-sidebar-x{
        opacity: 0;
        transition: opacity .35s;
        z-index: -1;
        pointer-events: none;
    }
    .tablet-side .app-sidebar-x{
        opacity: 1;
        z-index: 2;
        pointer-events: all
    }
    #app-theme.tablet-side .app-sidebar-overlay{
        transition: background .4s;
    }
    #app-theme.tablet-side .app-sidebar-overlay{
        content:"";
        position: fixed;
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,.25);
        z-index: 1;
    }

}