#navbar-4 {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
}

html.bg-purple #navbar-4 {
    background: #1e3c72;
    background: -webkit-linear-gradient(to top, #203f76, #1e3c72);
    background: linear-gradient(to top, #203f76, #1e3c72);
}

html.bg-black #navbar-4 {
    background: #2b3643;
}

html.bg-green #navbar-4 {
    background: #158e78;
}

html.bg-blue-green #navbar-4 {
    background: #0288d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-65deg, #008fe2 0, #00b29c 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #008fe2), color-stop(100%, #00b29c));
    background: -webkit-linear-gradient(-65deg, #008fe2 0, #00b29c 100%);
    background: -o-linear-gradient(-65deg, #008fe2 0, #00b29c 100%);
    background: -ms-linear-gradient(-65deg, #008fe2 0, #00b29c 100%);
    background: linear-gradient(154deg, #008fe2 0, #00b29c 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#008fe2', endColorstr='#00b29c', GradientType=1);
}



#navbar-4 .navbar-nav > li > a {
    color: #fff;
}

body.nav-none #navbar-2,
body.nav-side #navbar-2,
body.nav-side-card #navbar-2,
body.nav-side-label #navbar-2 {
    display: none;
}

body.nav-top #navbar-2 {
    display: none;
}

body.nav-top #navbar-1 {
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
}

body.nav-top-card #navbar-1,
body.nav-top-label #navbar-1 {
    box-shadow: none;
    -webkit-box-shadow: none;
}

body.nav-none #navbar-4,
body.nav-top #navbar-4,
body.nav-top-card #navbar-4,
body.nav-top-label #navbar-4 {
    display: none;
}

body.nav-side-label #navbar-4 .navbar-nav > li > a {
    font-size: 12px;
    padding-top: 12px;
    padding-bottom: 10px;
}

body.nav-side-card #navbar-4 .navbar-nav > li > a {
    text-align: center;
    font-size: 11px;
    padding-top: 12px;
    padding-bottom: 12px;
}

html.bg-purple #navbar-4 .navbar-nav > .open > a,
html.bg-purple #navbar-4 .navbar-nav > .open > a:hover,
html.bg-purple #navbar-4 .navbar-nav > .open > a:focus {
    background-color: #385383;
}

html.bg-black #navbar-4 .navbar-nav > .open > a,
html.bg-black #navbar-4 .navbar-nav > .open > a:hover,
html.bg-black #navbar-4 .navbar-nav > .open > a:focus {
    background-color: #434c58;
}

html.bg-green #navbar-4 .navbar-nav > .open > a,
html.bg-green #navbar-4 .navbar-nav > .open > a:hover,
html.bg-green #navbar-4 .navbar-nav > .open > a:focus {
    background-color: #399f8c;
}

body.nav-side #navbar-4 .navbar-nav > li > a {
    text-align: center;
    font-size: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
}

body.nav-side-card #navbar-4 .navbar-nav > li > a > i.menu {
    display: block;
    width: 100%;
    font-size: 18px;
}

body.nav-side-label #navbar-4 .navbar-nav > li > a > i.menu {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
}

body.nav-side-label #navbar-4 .navbar-nav > li > a > span {
    margin-top: -2px;
    position: absolute;
}

body.nav-side #navbar-4 .navbar-nav > li > a > span {
    display: none;
}

#navbar-4 ul.nav-menus {
    padding: 0 15px !important;
    text-align: center;
}

    #navbar-4 ul.nav-menus li.nav-menu {
        width: 30%;
        display: inline-block;
    }

        #navbar-4 ul.nav-menus li.nav-menu > a {
            text-align: center;
            cursor: pointer;
        }

    #navbar-4 ul.nav-menus li > h5 {
        text-align: center;
        color: #fff;
        padding-top: 6px;
        padding-bottom: 6px;
        font-weight: 400;
        letter-spacing: 0.8px;
    }

html.bg-purple #navbar-4 ul.nav-menus li > h5 {
    background-color: #4d6690;
}

html.bg-black #navbar-4 ul.nav-menus li > h5 {
    background-color: #575f6a;
}

html.bg-green #navbar-4 ul.nav-menus li > h5 {
    background-color: #58ad9d;
}

#navbar-4 ul.nav-menus li.nav-menu > a > i {
    display: block;
    font-size: 30px;
}

#navbar-4 .mega-dropdown {
    position: static !important;
}


#navbar-4 .mega-dropdown-menu {
    padding: 0;
    margin: 0;
    width: 260px;
    height: calc(100% - 20px);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.10), 2px 4px 8px rgba(0,0,0,.15);
}

html.bg-purple #navbar-4 .mega-dropdown-menu {
    background-color: #385383;
}

html.bg-black #navbar-4 .mega-dropdown-menu {
    background-color: #434c58;
}

html.bg-green #navbar-4 .mega-dropdown-menu {
    background-color: #399f8c;
}

#navbar-4 .mega-dropdown-menu > li > a {
    padding: 5px 15px;
    color: #fff;
    outline: none;
}

html.bg-purple #navbar-4 .mega-dropdown-menu > li > a:hover,
html.bg-purple #navbar-4 .mega-dropdown-menu > li > a:focus,
html.bg-purple #navbar-4 .mega-dropdown-menu > li > a.open,
html.bg-purple #navbar-4 .mega-dropdown-menu > li > a.open:hover,
html.bg-purple #navbar-4 .mega-dropdown-menu > li > a.open:focus {
    background-color: #4d6690;
}

html.bg-black #navbar-4 .mega-dropdown-menu > li > a:hover,
html.bg-black #navbar-4 .mega-dropdown-menu > li > a:focus,
html.bg-black #navbar-4 .mega-dropdown-menu > li > a.open,
html.bg-black #navbar-4 .mega-dropdown-menu > li > a.open:hover,
html.bg-black #navbar-4 .mega-dropdown-menu > li > a.open:focus {
    background-color: #575f6a;
}

html.bg-green #navbar-4 .mega-dropdown-menu > li > a:hover,
html.bg-green #navbar-4 .mega-dropdown-menu > li > a:focus,
html.bg-green #navbar-4 .mega-dropdown-menu > li > a.open,
html.bg-green #navbar-4 .mega-dropdown-menu > li > a.open:hover,
html.bg-green #navbar-4 .mega-dropdown-menu > li > a.open:focus {
    background-color: #58ad9d;
}


#navbar-4 .inner-menu {
    overflow-x: auto;
}

html.bg-purple #navbar-4 .inner-menu {
    background-color: #4d6690;
}

html.bg-black #navbar-4 .inner-menu {
    background-color: #575f6a;
}

html.bg-green #navbar-4 .inner-menu {
    background-color: #58ad9d;
}

.navbar-fixed-left,
.navbar-fixed-right {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

@media (min-width: 768px) and (min-width: 768px) {

    body.nav-none .navbar-fixed-left {
        display: none;
    }

    body.nav-side .navbar-fixed-left {
        width: 50px;
        height: 100vh;
        border-radius: 0;
    }

    body.nav-side-card .navbar-fixed-left {
        width: 100px;
        height: 100vh;
        border-radius: 0;
    }

    body.nav-side-label .navbar-fixed-left {
        width: 200px;
        height: 100vh;
        border-radius: 0;
    }

    .navbar-fixed-left .container {
        padding-right: 0;
        padding-left: 0;
        width: auto;
    }

    .navbar-fixed-left .navbar-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-fixed-left .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
        max-height: none;
    }

        .navbar-fixed-left .navbar-collapse .navbar-nav {
            float: none !important;
        }

            .navbar-fixed-left .navbar-collapse .navbar-nav > li {
                width: 100%;
            }

                .navbar-fixed-left .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu {
                    top: 0;
                }

            .navbar-fixed-left .navbar-collapse .navbar-nav.navbar-right {
                margin-right: 0;
            }
}

@media (min-width: 768px) {

    body.nav-none {
        padding-top: 0;
        padding-left: 0;
    }

    body.nav-side {
        padding-top: 0;
        padding-left: 50px;
    }

    body.nav-side-card {
        padding-top: 0;
        padding-left: 100px;
    }

    body.nav-side-label {
        padding-top: 0;
        padding-left: 200px;
    }

    .navbar-fixed-left {
        right: auto !important;
        left: 0 !important;
        border-width: 0 !important;
    }

        .navbar-fixed-left .dropdown .dropdown-menu {
            left: 100%;
            right: auto;
            border-radius: 0 3px 3px 0;
        }

        .navbar-fixed-left .dropdown .dropdown-toggle .caret {
            border-top: 4px solid transparent;
            border-left: 4px solid;
            border-bottom: 4px solid transparent;
            border-right: none;
        }
}