.hamburgerAdjust {
    width: 40px;    
}


/* ---------------------------------------------------
    SIDEBAR STYLE https://bootstrapious.com/p/bootstrap-sidebar#sidebar-1
----------------------------------------------------- */

.wrapper {
    /*display: flex;*/
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh; /* initial height of the sidebar will be at least equal to the screen height. Also, its height will increase when the page content would increase. */
    transition: all 0.3s;
    /*background: #7386D5;
    color: #fff;*/
}

    #sidebar.hide {
        /* margin-left value must be equal to the #sidebar width*/
        margin-left: -250px;
    }

    #sidebar .sidebar-header {
        padding: 20px;
        background: #6d7fcc;
    }

    /*#sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #47748b;
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

        #sidebar ul li a:hover {
            color: #7386D5;
            background: #fff;
        }

    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #fff;
        background: #6d7fcc;
    }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}
*/

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    /* this tag is not used in index.html refer to .content */
    width: 100%;
    padding: 20px;
    min-height: 93vh; /* lowerd from 100vh another component is causing the vertical scroll bar to appear*/
    transition: all 0.3s;
}

/*#region navbar Gobal styles */

.navbar {
    /*z-index: 2000;*/
    /*margin-bottom: 4px;*/ /*move-to to address correction css area*/
}

.navbar-brand {
    /*margin-left: 25px !important;*/
}

/* navigation bar */
/*.navbar-default {
    background-color: #222f3f;
    border-color: #222f3f;
}

    .navbar-default .navbar-brand {
        color: #ecf0f1;
        margin-top: 4px;
    }

        .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
            color: #ff0000;
        }

    .navbar-default .navbar-text {
        color: #ecf0f1;
    }

    .navbar-default .navbar-nav > li > a {
        color: #ecf0f1;
        top: 6px;
    }

        .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
            color: #ff0000;
        }

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        color: #ff0000;
        background-color: #222f3f;
    }

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
        color: #ff0000;
        background-color: #222f3f;
    }

    .navbar-default .navbar-toggle {
        border-color: #222f3f;
    }

        .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
            background-color: #222f3f;
        }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #ecf0f1;
        }

    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: #ecf0f1;
    }

    .navbar-default .navbar-link {
        color: #ecf0f1;
    }

        .navbar-default .navbar-link:hover {
            color: #ff0000;
        }*/

/*#endregion */

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

    /* ngHamburger (vertical toggle quick entry */
    .navbar .hamburger-toggle {
        /*top: 15px;*/
    }

        .navbar .hamburger-toggle .material-design-hamburger__layer {
            background: #666;
        }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media (max-width: 768px) {

    /* ngHamburger (vertical toggle quick entry */
    .navbar .hamburger-toggle {
    }

        .navbar .hamburger-toggle .material-design-hamburger__layer {
            background: #666;
        }


    /* We will need slightly different behaviour for the sidebar on the smaller screens. 
        Instead of appearing by default, it'll be hidden and appear only after clicking the toggle button
        Basically, what we need to do here is to reverse the .hide style:
    */
    #sidebar {
        margin-left: -250px;
    }

        #sidebar.hide {
            margin-left: 0;
        }

    #sidebarCollapse span {
        display: none;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    /* ngHamburger (vertical toggle quick entry */
    .navbar .hamburger-toggle {
    }

        .navbar .hamburger-toggle .material-design-hamburger__layer {
            background: #666;
        }

    .navbar .hamburger-toggle1 {
        left: 25px;
    }

}