@import url(https://fonts.cdnfonts.com/css/sf-ui-text-2);

 body[data-topbar=light] #page-topbar {
    background-color: #FFFFFF;
     color: #0a121c;
}

body[data-topbar=colored] .navbar-header .dropdown.show .header-item, body[data-topbar=dark] .navbar-header .dropdown.show .header-item, body[data-topbar=light] .navbar-header .dropdown.show .header-item {
    background-color: rgba(255, 255, 255, .05)
}

body[data-topbar=light] .navbar-header .waves-effect .waves-ripple {
    background: rgba(255, 255, 255, .4)
}

body[data-topbar=light] .logo-dark {
    display: none
}

body[data-topbar=light] .logo-light {
    display: block
}

body[data-topbar=light] .header-item {
    color: #e9ecef
}

body[data-topbar=light] .header-item:hover {
    color: #e9ecef
}

body[data-topbar=light] .header-profile-user {
    background-color: rgba(255, 255, 255, .25)
}

body[data-topbar=light] .noti-icon i {
    color: #e9ecef
}

body[data-topbar=light] .logo-dark {
    display: none
}

body[data-topbar=light] .logo-light {
    display: block
}

body[data-topbar=light] .app-search .form-control {
    background-color: rgba(243, 243, 249, .07);
    color: #fff
}
 body[data-topbar=light] .app-search input.form-control::-webkit-input-placeholder, body[data-topbar=light] .app-search span {
    color: rgba(255, 255, 255, .5)
}

 body[data-sidebar=light] .vertical-menu {
    background: #2a3042
}

body[data-sidebar=light] #sidebar-menu ul li a {
    color: #a6b0cf
}

body[data-sidebar=light] #sidebar-menu ul li a i {
    color: #6a7187
}

body[data-sidebar=light] #sidebar-menu ul li a:hover {
    color: #fff
}

body[data-sidebar=light] #sidebar-menu ul li a:hover i {
    color: #fff
}

body[data-sidebar=light] #sidebar-menu ul li ul.sub-menu li a {
    color: #79829c
}

body[data-sidebar=light] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff
}

body[data-sidebar=light].vertical-collpsed {
    min-height: 1200px
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: #2e3548;
    color: #fff
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: #fff
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    color: #79829c
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
    color: #fff
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: #2a3042
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: #3b5de7 !important
}

body[data-sidebar=light].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
    color: #3b5de7 !important
}

body[data-sidebar=light] .mm-active {
    color: #fff !important
}

body[data-sidebar=light] .mm-active > i {
    color: #fff !important
}

body[data-sidebar=light] .mm-active .active {
    color: #fff !important
}

body[data-sidebar=light] .mm-active .active i {
    color: #fff !important
}

body[data-sidebar=light] .menu-title {
    color: #6a7187
}


@media (min-width: 992px) {
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: #FFFFFF !important;
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
        color: rgba(42, 48, 66, 1) !important;
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover {
        color: rgba(47, 72, 177, 1)
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a {
        color: rgba(255, 255, 255, .9) !important
    }
}

body[data-layout=horizontal][data-topbar=colored] #page-topbar, body[data-layout=horizontal][data-topbar=light] #page-topbar {
    background-color: #FFFFFF;
    -webkit-box-shadow: none;
    box-shadow: none
}

.logo-dark, body[data-layout=horizontal][data-topbar=light] .logo-dark {
    display: none
}

body[data-layout=horizontal][data-topbar=light] .logo-light {
    display: block
}

body[data-layout=horizontal][data-topbar=light] .app-search .form-control {
    background-color: rgba(243, 243, 249, .07);
    color: #fff
}

body[data-layout=horizontal][data-topbar=light] .app-search input.form-control::-webkit-input-placeholder, body[data-layout=horizontal][data-topbar=light] .app-search span {
    color: rgba(255, 255, 255, .5)
}

body[data-layout=horizontal][data-topbar=light] .header-item {
    color: #8687a7
}

 body[data-layout=horizontal][data-topbar=light] .header-item:hover {
    color: #8687a7
}

body[data-layout=horizontal][data-topbar=colored] .navbar-header .dropdown.show .header-item, body[data-layout=horizontal][data-topbar=light] .navbar-header .dropdown.show .header-item {
    background-color: rgba(255, 255, 255, .1)
}

body[data-layout=horizontal][data-topbar=colored] .navbar-header .waves-effect .waves-ripple, body[data-layout=horizontal][data-topbar=light] .navbar-header .waves-effect .waves-ripple {
    background: rgba(255, 255, 255, .4)
}

body[data-layout=horizontal][data-topbar=colored] .noti-icon i, body[data-layout=horizontal][data-topbar=light] .noti-icon i {
    color: #8687a7;
}

@media (min-width: 992px) {
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
        color: rgba(255, 255, 255, .5)
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, .9)
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a {
        color: rgba(255, 255, 255, .9) !important
    }
}

body[data-layout=horizontal][data-topbar=light] #page-topbar {
    background-color: #FFFFFF;
}