/* Base layout */


/* Sidebar */
.sidebar {
    position: fixed;
    top: 50px; /* below navbar */
    left: 0;
    width: 260px;
    bottom: 0; /* ensures full height */
    background: #f7f7f7;
    border-right: 1px solid #ddd;
    overflow-y: auto; /* vertical scroll */
    -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
    z-index: 100;
    padding-bottom: 100px;
}

/* Main content desktop */
.main-content {
    padding-left: 260px; /* leave space for sidebar on desktop */
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .sidebar {
        left: -260px; /* hidden by default */
        
    }

    .offcanvas-open .sidebar {
        left: 0; /* slide over content */
            width: 100%;

    }

    .main-content {
        padding-left: 0; /* no shifting */
    }
}

/* Sidebar menu styling */

.sidebar-menu > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color:#000;
    border-bottom: 1px solid #ddd;
}

.sidebar-menu-subheading {
    padding: 10px 15px;
    font-style: italic;
    background: #fff;
    border-top: 1px dashed #ddd;
}

.sidebar-menu .nav > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.sidebar-menu .nav > li > a:hover,.sidebar-menu .nav > li > a:focus  {
}

.sidebar-menu > li > a[aria-expanded="true"] .caret ,.sidebar-menu-collapse > li > a[aria-expanded="true"] .caret  {
    transform: rotate(180deg);
}

/***.sidebar-menu-collapse li:last-child {
    border-bottom: 1px solid #ddd;
}***/



.sidebar-submenu-group {
    padding-left: 15px;
    background-color: #fff;
}
.sidebar-submenu-group .sidebar-submenu{
    border-left:1px solid #ddd;
}

.sidebar-search {
    padding:10px 15px;
    background: #fff;
}


.nav-stacked>li+li {
    margin-top: 0!important;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color: #004a8c;
}


.sidebar-menu  .caret {
    color: #000 !important;
    margin:0 !important;
}

.nav-offcanvas {
    display: flex;
    justify-items: space-between;
}

@media (min-width: 767px) {
    .nav-offcanvas {
        width: 100%;
    }
}


.nav-offcanvas-right {
    display: flex;
    flex: 1;
    justify-content: end;
}


@media (max-width: 992px) {
    .nav-offcanvas-right .nav-flex-ui-long {
        width: 50px !important;
        background-image: url(../images/icon-unifiedincentives-full-white.svg) !important;
        background-repeat: no-repeat !important;
        background-size: 34px auto !important;
        background-position: center !important;
    }

    .nav-offcanvas-right .open .nav-flex-ui-long {
        background-image: url(../images/icon-unifiedincentives-full.svg) !important;
        background-repeat: no-repeat !important;
        background-size: 34px auto !important;
        background-position: center !important;
    }

    .nav-offcanvas-right .nav-flex:hover .nav-flex-ui-long, .nav-offcanvas-right .nav-flex:focus .nav-flex-ui-long, .nav-offcanvas-right .nav-flex.open:hover .nav-flex-ui-long, .nav-offcanvas-right .nav-flex:focus .nav-flex-ui-long {
        background-image: url(../images/icon-unifiedincentives-full.svg) !important;
        background-repeat: no-repeat !important;
        background-size: 34px auto !important;
        background-position: center !important;
    }

    .nav-offcanvas-right .nav-flex-account {
        display: none !important;
    }

}

@media (max-width: 767px) {
    .nav-offcanvas-right .nav-flex-account-icon {
        margin: 0 !important;
    }
    .nav-offcanvas-right .nav-flex .dropdown-menu {
        width: auto !important;
        background: #fff !important;
        border-radius: 0;
    }
}



.main-content .container-fluid {
	padding-right: 30px;
    padding-left: 30px;
}

@media all and (max-width: 767px) {
	.main-content .container-fluid {
		padding-right: 15px;
		padding-left: 15px;
	}
}