#offcanvasNavbar {
    background: #2f384a;
}

.offcanvas-header {
    padding: 38px 15px 38px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.custom-nav li {
    flex: 0 0 100%;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .custom-nav li a {
        color: #fff;
        padding: 15px 10px;
        display: block;
    }
    /*.custom-nav li:hover {
        cursor: pointer
    }*/
#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
}

    #sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }

#wrapper.toggled #sidebar-wrapper {
    width: 400px;
}

.menu-wrapper div.trs-logo {
    padding: 38px 15px 38px 15px;
    transition: color .3s;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(45, 45, 45, 0.8);
    z-index: 8;
}

.nav, .transition, .sidebar-nav ul {
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: transparent;
    }

.slide-out {
    -webkit-transform: translate3d(-400px, 0, 0);
    -ms-transform: translate3d(-400px, 0, 0);
    -o-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
}

.nav-sub-page-trs {
    border-left: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
}

    .nav-sub-page-trs:hover {
        background: #064172 !important;
    }

.sidebar-nav ul {
    display: none;
    position: absolute;
    top: 0;
    left: 400px;
    width: 100%;
}

.sidebar-nav > li {
    position: static;
    display: none;
    margin-left: -1000px;
}

.sidebar-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .sidebar-nav li a {
        padding: 15px;
        color: #fff;
        text-decoration: none;
        display: block;
    }

.sidebar-nav > li.slide-menu-trs > a:hover,
.sidebar-nav > li.slide-menu-trs > a:active,
.sidebar-nav > li.slide-menu-trs div > a:hover,
.sidebar-nav > li.slide-menu-trs div > a:active,
.sidebar-nav > li > a:hover,
.sidebar-nav > li > a:active, 
.sidebar-nav > li.slide-menu-trs > ul > li > a:hover,
.sidebar-nav > li.slide-menu-trs > ul > li > a:active
{
    color: #39b3ff;
    background: transparent;
}

        .sidebar-nav li a .badge {
            border-radius: 4px;
            /*background-color: #e7a128 !important;*/
        }

.is-open > ul {
    display: block;
}

button.is-open {
    left: 400px;
    position: fixed;
    top: 5px;
}

    button.is-open .icon-bar {
        background-color: #fff;
    }
/*Hamburger icon css starts here*/
.navbar-toggle {
    display: block;
    z-index: 9;
    margin-right: 0;
}

    .navbar-toggle .icon-bar {
        width: 28px;
        transition: .5s ease;
        background-color: #333;
    }

    .navbar-toggle.collapsed-trs .icon-bar:nth-child(2) {
        transform: rotate(0)translateY(0)translateX(0);
    }

    .navbar-toggle.collapsed-trs .icon-bar:nth-child(3) {
        opacity: 1;
    }

    .navbar-toggle.collapsed-trs .icon-bar:nth-child(4) {
        transform: rotate(0)translateY(0)translateX(0);
    }

    .navbar-toggle .icon-bar:nth-child(2) {
        transform: rotate(-45deg)translateY(5px)translateX(-5px);
    }

    .navbar-toggle .icon-bar:nth-child(3) {
        opacity: 0;
    }

    .navbar-toggle .icon-bar:nth-child(4) {
        transform: rotate(45deg)translateY(-4px)translateX(-3px);
    }
/*Hamburger icon css ends here*/

.menu-info-header {
    margin: 0;
}

    .menu-info-header li > a {
        padding: 5px 10px 5px 5px;
        background-color: transparent !important;
    }

    .menu-info-header .btn-alert-message {
        background-color: #f5ab35;
    }

    .menu-info-header > li > a:hover .btn-circle {
        background-color: #fff;
        border: 1px solid #2b8dcc;
    }

    .menu-info-header > li a:hover .btn-circle .glyphicon {
        color: #64a6d2;
    }

    .menu-info-header a:hover .btn-circle i {
        color: #64a6d2;
    }

    .menu-info-header .alerts a:hover .btn-circle i {
        color: #f5ab35;
    }

    .menu-info-header .list-group-item {
        color: #fff;
        background-color: #266690;
        border-radius: 0;
        width: 305px;
    }

    .menu-info-header a:hover .btn-alert-message {
        border: 1px solid #f5ab35;
    }

    .menu-info-header .dropdown ul.dropdown-menu:before {
        content: "";
        border-bottom: 10px solid #266690;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: -9px;
        z-index: 10;
    }

    .menu-info-header .dropdown ul.dropdown-menu {
        position: absolute;
        background-color: #266690;
        border: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
        box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
        padding: 0;
        top: 60px;
    }


.alert-trs {
    top: -5px !important;
    right: -8px;
    position: absolute !important;
}

.alerts ul.dropdown-menu:before {
    left: 52%;
}

.alerts ul.dropdown-menu {
    left: -143px;
}

.profile ul.dropdown-menu:before {
    left: 70%;
}

.profile ul.dropdown-menu {
    left: -199px;
}

.unitValues ul.dropdown-menu:before {
    left: 87%;
}

.unitValues ul.dropdown-menu {
    left: -250px;
}

.iWantTo ul.dropdown-menu:before {
    left: 87%;
}

.iWantTo ul.dropdown-menu {
    left: -250px;
}

.searchIcon ul.dropdown-menu:before {
    left: 86%;
}

.searchIcon ul.dropdown-menu {
    left: -248px;
}

.nav-section-trs {
    border-left: 1px solid #bababa;
}

.nav-menu-trs {
    background: #fff;
    -webkit-box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
}

    .nav-menu-trs .media, .nav-menu-trs .media-body {
        overflow: visible;
    }

    .nav-menu-trs .media-left, .nav-menu-trs .media-body {
        padding: 10px;
    }

.slide-menu-trs .menu-back {
    background: #bfd3e1;
    cursor: pointer;
}
li.menu-back > a:hover {
    background: #064172 !important;
}


@media (max-width: 768px) {
    .menu-info-header > li {
        float: left;
    }

    .breadcrumb-trs li {
        font-size: 13px;
    }

    .help-button-trs {
        padding: 5px;
        min-width: 68px;
    }

    .nav-menu-trs .media-left, .nav-menu-trs .media-body {
        padding: 5px;
    }
}

@media (max-width: 767px) {

    .alerts ul.dropdown-menu:before {
        left: 43%;
    }

    .alerts ul.dropdown-menu {
        left: -125px;
    }

    .profile ul.dropdown-menu:before {
        left: 58%;
    }

    .profile ul.dropdown-menu {
        left: -170px;
    }

    .unitValues ul.dropdown-menu:before {
        left: 73%;
    }

    .unitValues ul.dropdown-menu {
        left: -215px;
    }

    .iWantTo ul.dropdown-menu:before {
        left: 88%;
    }

    .iWantTo ul.dropdown-menu {
        left: -400px;
    }

    .searchIcon ul.dropdown-menu:before {
        left: 86%;
        border-bottom: 10px solid #64a6d2 !important;
    }

    .searchIcon ul.dropdown-menu {
        left: -248px;
    }
}


@media (max-width: 640px) {
    .menu-info-header li a.dropdown-toggle {
        padding: 5px 10px 0 0px;
    }
}