/******************************** For Top Nav Bar *****************************************/

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*background-color: #333;*/
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
    border-bottom: transparent solid 3px;
    display: inherit;
    align-items: center;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #333;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li:hover {
    color: #999999;
    border-bottom: 3px solid #999999;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}

ul.topnav li.active {
    border-bottom: 3px solid #2858a7;
}

ul.topnav li.active a {
    color: #333;
}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }

    ul.topnav li.icon {
        display: inline-block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
    ul.topnav.responsive {
        position: relative;
    }

    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    ul.topnav.responsive li {
        float: none;
        display: inline;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}



/********************************* NEW SIDE NAV ***********************************/
/*
.row{
    margin-left:0px;
    margin-right:0px;
}
*/

/*The padding-left relates to the #sidegbar-wrapper's left */
#wrapper {
    padding-left: 220px;
    transition: all .4s ease 0s;
    height: 100%;
}

/*The left option determines how much of the menu stays showing*/
#sidebar-wrapper {
    margin-left: -220px;
    left: 220px;
    width: 220px;
    background: #252525;
    position: fixed;
    height: 100%;
    /*z-index: 1000;*/
    transition: all .4s ease 0s;
}

#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}

#wrapper.closed {
    padding-left: 45px;
}

#wrapper.closed #sidebar-wrapper {
    left: 45px;
}

/* the 'color' is the font and icon color */
#sidebar_menu li a,
.sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    background: #252525;
    /*border-top: 1px solid #373737;*/
    /*border-bottom: 1px solid #1A1A1A;*/
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}

#sidebar_menu li a:hover {
    background: #18325d;
    border-left: 5px solid silver;
}

/*links*/
#sidebar_menu li ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    line-height: 34px;
    display: block;
    padding: 0 15px;
    width: 200px;
    /*Width of sub menu options */
    transition: all 0.15s;
    /*transition for smooth hover animation*/
}

/*hover effect on links*/
#sidebar_menu li ul li a:hover {
    background: #18325d;
    border-left: 5px solid silver;
}

/*Lets hide the non active LIs by default*/
#sidebar_menu li ul {
    display: none;
}

#sidebar_menu li.active ul {
    display: block;
}


/*Width of main menu options */

.sidebar-nav {
    display: block;
    float: left;
    width: 220px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

.sidebar-nav li {
    line-height: 40px;
    text-indent: 20px;
}

.sidebar-nav li a {
    width: 220px;
    color: #999999;
    display: block;
    text-decoration: none;
}

.sidebar-nav li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
    height: 65px;
    line-height: 60px;
    font-size: 18px;
}

.sidebar-nav>.sidebar-brand a {
    color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: none;
}

.menu_bars {
    float: right;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.menu_icon {
    float: right;
    margin-right: 12px;
    margin-top: 20px;
}

.menu_search_icon {
    float: right;
    display: inline;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: #999;
    margin: 10px
}

.sub_icon {
    float: right;
    padding-right: 20px;
    padding-top: 10px;
}

.content-header {
    height: 65px;
    line-height: 65px;
}

.content-header h1 {
    margin: 0;
    margin-left: 20px;
    line-height: 65px;
    display: inline-block;
}

/*@media (max-width:767px) {*/
@media (max-width:1199px) {
    #wrapper {
        padding-left: 45px;
        transition: all .4s ease 0s;
    }

    #sidebar-wrapper {
        left: 45px;
    }

    #wrapper.closed {
        padding-left: 220px;
    }

    #wrapper.closed #sidebar-wrapper {
        left: 220px;
        width: 220px;
        transition: all .4s ease 0s;
    }
}