body.ingite-dashboard .ingite-dashboard-wrapper{
    transition:all .15s;
}

@media screen and (min-width:993px){
    body.ingite-dashboard.ingite-dashboard-nav-active .ingite-dashboard-wrapper,
    body.ingite-dashboard.ingite-dashboard-nav-init-active:not(.ingite-dashboard-mode-focus) .ingite-dashboard-wrapper{
        margin-left:64px;
        width:calc(100% - 64px)
    }

    body.ingite-dashboard:not(.ingite-dashboard-nav-active):not(.ingite-dashboard-nav-init-active) .ingite-dashboard-wrapper{
        margin-left:0px;
        width:100%;
    }
}

@media screen and (max-width:992px){
    body.ingite-dashboard.ingite-dashboard-nav-active,
    body.ingite-dashboard.ingite-dashboard-nav-init-active{
        overflow:hidden;
    }

    body.ingite-dashboard:not(.ingite-dashboard-nav-active) .ingite-dashboard-nav{
        transform:translateX(-100%);
    }
}

@media screen and (min-width:1600px){
    body.ingite-dashboard.ingite-dashboard-nav-active .ingite-dashboard-wrapper,
    body.ingite-dashboard.ingite-dashboard-nav-init-active:not(.ingite-dashboard-mode-focus) .ingite-dashboard-wrapper{
        margin-left:300px;
        width:calc(100% - 300px)
    }
}

.ingite-dashboard-nav{
    position:fixed;
    height:100%;
    max-width:100%;
    background:var(--amoksys-color-primary);
    color:var(--amoksys-color-on-primary);
    left:0;
    transition:all .15s;
    display:flex;
    flex-direction:column;
    z-index:6;
}

@media screen and (min-width:993px){
    body.ingite-dashboard.ingite-dashboard-nav-init-active .ingite-dashboard-nav{
        transform:none;
    }

    body.ingite-dashboard:not(.ingite-dashboard-nav-active):not(.ingite-dashboard-nav-init-active) .ingite-dashboard-nav{
        transform:translateX(-100%);
    }

    .ingite-dashboard-nav{
        width:64px;
    }

    .ingite-dashboard-nav:hover{
        width:300px;
    }
}

@media screen and (max-width:992px){
    .ingite-dashboard-nav{
        top: 64px;
        height:calc(100% - 64px);
        width:100%;
    }
}

@media screen and (max-width:600px){
    .ingite-dashboard-nav{
        top: 56px;
        height:calc(100% - 56px)
    }
}

@media screen and (min-width:1600px){
    .ingite-dashboard-nav{
        width:300px;
    }
}


/* nav-items */
.ingite-dashboard-nav .ingite-dashboard-nav-items{
    flex:1 1 0;
    .collapsible + .divider{
        margin-top:.5rem;
    }
}

/* dashboard nav collapsible */
.ingite-dashboard-nav > .ingite-dashboard-nav-items{
    overflow-x:hidden!important;
}

.ingite-dashboard-nav-header{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: sticky;
    top: 0;
    height:calc(40px + 12px + 12px);
    background:var(--amoksys-color-primary);
    border-bottom: 2px solid var(--amoksys-color-primary-variant);
    z-index: 2;
    .ingite-collection-item{
        flex:1 1 0;
        min-width:40px;
        height: calc(40px + 12px + 12px);
        overflow:hidden;
        padding: 12px;
        .ingite-collection-item-avatar{
            margin:0;
            width:40px;
            min-width:40px;
            height:40px;
            min-height:40px;
        }
        .ingite-collection-item-content{
            line-height:20px;
            transition: all .15s;
            max-width: calc(100% - 40px);
        }
    }
}

@media screen and (min-width:993px) and (max-width:1599px){
    .ingite-dashboard-nav:not(:hover)  .ingite-dashboard-nav-header .ingite-collection-item ~ *{
        display:none;
    }

    .ingite-dashboard-nav:not(:hover) .ingite-dashboard-nav-items .ingite-collection-item .ingite-collection-item-content{
        font-size:0;
    }
}

/* nav dashboard-collection-item*/

.ingite-dashboard-nav-item,
.ingite-dashboard-nav-item.collapsible-header{
    display:block;
    border-radius:20px;
    min-width:40px;
    height:40px;
    font-size:24px;
    line-height:40px;
    background:transparent;
    color:inherit;
    cursor:pointer;
    text-align:center;
    overflow:hidden;
    margin:0.5rem 12px;
    transition: all .15s, margin 0s, width 0s;
    i{
        display: block;
        float: left;
        width: 40px;
        height: inherit;
        line-height: inherit;
    }
}

.ingite-dashboard-nav-item,
.ingite-dashboard-nav-item.collapsible-header,
.ingite-dashboard-nav-collapsible.collapsible:not(.sub-collapsible){
    width:calc(100% - 28px);
}

.ingite-dashboard-nav-item-title{
    font-size:15px;
    transition:all .15s;
    float:left;
    max-width:calc(100% - 40px);
    width:100%;
    overflow:hidden;
    text-overflow: ellipsis;
    text-align: left;
    white-space: nowrap;
    padding-right: 0;
    i{
        font-size:15px;
    }
    span.badge {
        margin-left: 0.5rem;
        line-height: 22px;
        height: 22px;
        margin-top: 9px;
        float: right;
    }
}

.ingite-dashboard-nav-item:not(.collapsible-header) .ingite-dashboard-nav-item-title{
    padding-right:1rem;
}

@media (min-width:993px) and (max-width:1599px){
    .ingite-dashboard-nav:not(:hover) .ingite-dashboard-nav-item-title,
    .ingite-dashboard-nav:not(:hover) .ingite-dashboard-nav-item-title{
        font-size:0px;
        padding:0;
    }
}

/* collapsible: nav item  */

@media (min-width:993px) and (max-width:1599px){
    .ingite-dashboard-nav:not(:hover) .collapsible-header-indicator{
        font-size:0px
    }
}

.ingite-dashboard-nav-collapsible,
.ingite-dashboard-nav-collapsible .collapsible-body{
    color:inherit!important;
}

.ingite-dashboard-nav-collapsible.collapsible,
.ingite-dashboard-nav-collapsible.collapsible:not(.popout){
    background:transparent;
    border:none;
}

.ingite-dashboard-nav-collapsible.collapsible:not(.sub-collapsible){
    border:none;
    min-width: 40px;
    margin:0.5rem 12px;
    transition: all .15s, margin 0s, width 0s;
}

.ingite-dashboard-nav-collapsible.collapsible:not(:only-child){
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}

@media screen and (max-width:992px){
    .ingite-dashboard-nav-collapsible:not(.sub-collapsible){
        width:calc(100% - 16px);
        margin:0.5rem 8px;
    }
}

.ingite-dashboard-nav-collapsible > li > .collapsible-header.ingite-dashboard-nav-item{
    background:transparent;
    color:inherit;
    margin:0;
    padding:0;
    border:none!important;
    width:100%;
    .collapsible-header-indicator-wrapper{
        float:right;
        i.mdi{
            margin:0;
        }
    }
    .ingite-dashboard-nav-item-header{
        width: calc(100% - 40px);
        display: block;
        float: left;
        i{
            margin:0;
        }
    }
}

.ingite-dashboard-nav-item:not(.active):hover{
    background:rgba(0,0,0,.25);
    background:rgba(0,0,0,var(--ingite-menu-active));
}

.ingite-dashboard-nav-item.active{
    background:rgba(0,0,0,.25);
    background:rgba(0,0,0,var(--ingite-menu-active));
}

.ingite-dashboard-nav-collapsible > li{
    > .collapsible-header.ingite-dashboard-nav-item.active{
        background:rgba(0,0,0,.25);
        background:rgba(0,0,0,var(--ingite-menu-active));
    }
    > .collapsible-header.ingite-dashboard-nav-item:not(.active):hover{
        background:rgba(0,0,0,.25);
        background:rgba(0,0,0,var(--ingite-menu-active));
    }
}

.ingite-dashboard-nav-collapsible > li.active{
    > .collapsible-header.ingite-dashboard-nav-item{
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }
    > .collapsible-header.ingite-dashboard-nav-item:not(.active){
        background:rgba(0,0,0,.1);
        background:rgba(0,0,0,var(--ingite-menu-open));
    }
    > .collapsible-header.ingite-dashboard-nav-item:not(.active):hover{
        background:rgba(0,0,0,.25);
        background:rgba(0,0,0,var(--ingite-menu-active));
    }
}

.ingite-dashboard-nav-collapsible .collapsible-body {
    background:rgba(0,0,0,.1);
    background:rgba(0,0,0,var(--ingite-menu-open));
    padding: 0;
    min-width: 40px;
    .ingite-dashboard-nav-item{
        width:100%;
        margin-left:0;
    }
    .ingite-dashboard-nav-item:first-child{
        margin-top:0;
    }
    .ingite-dashboard-nav-item.warning:not(.active){
        margin-top:0.5rem;
    }
    .ingite-dashboard-nav-item:not(.active){
        background: transparent;
    }
    .ingite-dashboard-nav-item:not(.active):hover{
        background:rgba(0,0,0,.25);
        background:rgba(0,0,0,var(--ingite-menu-active));
    }
    .ingite-dashboard-nav-item.divider{
        height: 1.1px;
        background:rgba(255,255,255,.1) !important;
        background:var(--amoksys-color-on-primary) !important;
    }
}

.ingite-dashboard-nav-collapsible > li:not(.active) > .collapsible-body{
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}

.ingite-dashboard-nav-collapsible > li.active > .collapsible-body{
    display:block;
    padding-top:0.1px;
}

.ingite-dashboard-nav-collapsible .collapsible-body > .ingite-dashboard-nav-item.active:first-child{
    margin-top:0;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

.ingite-dashboard-nav .ingite-dashboard-nav-collapsible .collapsible-body{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom:none;
}

/** divider */

.ingite-dashboard-nav-item.divider{
    width:100%;
    margin:.5rem 0;
    height:2px;
    border-radius:10px;
    cursor:default;
    background:rgba(0,0,0,.1) !important;
    background:var(--amoksys-color-primary-variant) !important;
    transition:all .15s;
}

.ingite-dashboard-nav-header + .ingite-dashboard-nav-item.divider{
    display:none;
}

.ingite-dashboard-nav-item.divider:first-child,
.ingite-dashboard-nav-item.divider:last-child,
.ingite-dashboard-nav-item.divider + .ingite-dashboard-nav-item.divider,
.ingite-dashboard-nav-collapsible + .ingite-dashboard-nav-item.divider{
    display:none;
}

/** footer */

.ingite-dashboard-nav-footer{
    border-top:2px solid var(--amoksys-color-primary-variant);
    height:66px;
    display:flex;
    max-width: 100%;
    overflow: hidden;
    > .ingite-dashboard-nav-items{
        padding:11px 12px 12px 12px;
    }
    .ingite-dashboard-nav-item{
        margin:0;
        flex:0;
    }
    .ingite-dashboard-nav-item:not(:first-child){
        margin-left: .5rem;
    }
}

@media screen and (max-width:600px){
    .ingite-dashboard-nav-footer{
        height:58px;
        > .ingite-dashboard-nav-items{
            padding:7px 8px 8px 8px;
        }
    }
}

.ingite-dashboard-nav-item.warning{
    background:#ff9800;
    color:white;
}

.ingite-dashboard-nav-collapsible > li > .collapsible-header.ingite-dashboard-nav-item.warning{
    background:rgba(255,152,0,.9);
    color:white;
}
.ingite-dashboard-nav-collapsible .collapsible-body .ingite-dashboard-nav-item.warning{
    background:#ff9800;
    color:white;
}