//## Base theme color file

    /*********** 
    Page Header
    ***********/

    /* Header search bar, toggler button & top menu */
    .page-header.navbar {
        background-color: $header-bg-color;

        /* Top notification menu/bar */
        .top-menu {
            .navbar-nav {
                > li.dropdown {
                    .dropdown-toggle {
                        > i {
                            color: $header-top-menu-icon-font-color;
                        }

                        .badge.badge-default {                        
                            background-color: $header-top-menu-badge-bg-color;
                            color: $header-top-menu-badge-font-color; 
                        }

                        &:hover {
                            background-color: $header-top-menu-bg-hover-color;

                            > i {
                                color: lighten($header-top-menu-icon-font-color, 15%);
                            }
                        }
                    }

                    &.open {
                        .dropdown-toggle {
                            background-color: $header-top-menu-bg-hover-color-on-dropdown-open;

                            > i {
                                color: lighten($header-top-menu-icon-font-color, 15%);
                            }
                        }
                    }
                }

                /* Extended Dropdowns */
                > li.dropdown-extended {

                    .dropdown-menu {
                        border-color: $header-top-menu-extended-dropdown-border-color; 

                        &:after {
                            border-bottom-color: $header-top-menu-extended-dropdown-header-bg-color;
                        }

                        > li.external {
                            background: $header-top-menu-extended-dropdown-header-bg-color;  

                            > h3 {
                                color: $header-top-menu-extended-dropdown-header-font-color;
                            }

                            > a {
                                color: $link-color;

                                &:hover {
                                    color: $link-hover-color;
                                    text-decoration: none; 
                                }
                            }
                        }  

                        .dropdown-menu-list {
                            > li {
                                > a {
                                    border-bottom: 1px solid $header-top-menu-extended-dropdown-item-border-color !important;
                                    color: $header-top-menu-extended-dropdown-item-font-color;

                                    &:hover {
                                        background: $header-top-menu-extended-dropdown-item-bg-color-on-hover;
                                    }    
                                }
                            }
                        }
                    }
                }   

                /* Notification */
                > li.dropdown-notification {        
                    .dropdown-menu {
                        .dropdown-menu-list {                            
                            > li {
                                > a {
                                    .time {
                                        background: $header-top-menu-notification-time-bg-color;
                                    }

                                    &:hover {
                                        .time {
                                            background: darken($header-top-menu-notification-time-bg-color, 5%);
                                        }
                                    } 
                                }
                            }
                        }
                    }
                }

                /* Inbox */
                > li.dropdown-inbox {
                    > .dropdown-toggle {
                        > .circle {
                            background-color: $brand-main-color;
                            color: $brand-main-font-color;
                        }

                        > .corner {
                            border-color: transparent transparent transparent $brand-main-color;
                        }
                    }

                    .dropdown-menu {
                        .dropdown-menu-list {
                            .subject {
                                .from {
                                    color: $header-top-menu-inbox-dropdown-from-font-color;
                                }
                            }
                        }
                    }       
                }
           
                /* Tasks */
                > li.dropdown-tasks {

                    .dropdown-menu {
                        .dropdown-menu-list {
                            .progress {
                                background-color: $header-top-menu-task-dropdown-progress-bg-color;
                            }
                        }
                    }
                }

                /* User */
                > li.dropdown-user {
                    > .dropdown-toggle {                    

                        > .username {
                            color: $header-top-menu-user-font-color;
                        }

                        > i {
                            color: $header-top-menu-user-font-color;
                        }
                    }

                    > .dropdown-menu {            
                        width: 195px;
                    } 
                }

                /* Language */
                > li.dropdown-language {
                    
                    > .dropdown-toggle {
                        > .langname {
                            color: $header-top-menu-user-font-color;  
                        }
                    }
                }

                /* Dark version */
                > li.dropdown-dark {
                    .dropdown-menu {
                        background: $header-top-menu-dropdown-dark-bg-color;
                        border: 0;

                        &:after {
                            border-bottom-color: $header-top-menu-dropdown-dark-bg-color;  
                        }

                        > li.external {
                            background: $header-top-menu-dropdown-dark-header-bg-color;

                            > h3 {
                                color: $header-top-menu-dropdown-dark-header-font-color;
                            }

                            > a {
                                &:hover {
                                    color: lighten($link-color, 11%);
                                }
                            }
                        } 

                        &.dropdown-menu-default,
                        .dropdown-menu-list {  
                            > li {
                                a {
                                    color: $header-top-menu-dropdown-dark-item-font-color;
                                    border-bottom: 1px solid $header-top-menu-dropdown-dark-item-border-color !important;

                                    > i {
                                        color: $header-top-menu-dropdown-dark-item-icon-color;
                                    }

                                    &:hover {
                                        background: $header-top-menu-dropdown-dark-item-bg-color-on-hover;
                                    }
                                }
                            }
                        }

                        &.dropdown-menu-default {
                            > li {
                                a {
                                    border-bottom: 0 !important;
                                }

                                &.divider {
                                    background: $header-top-menu-dropdown-dark-default-menu-divider;
                                }
                            }
                        }
                    }
                }

                > li.dropdown-notification.dropdown-dark {
                    .dropdown-menu {
                        .dropdown-menu-list {
                            > li {
                                > a {
                                    .time {
                                        background: $header-top-menu-dropdown-dark-notification-time-bg-color;
                                    }

                                    &:hover {
                                        .time {
                                            background: darken($header-top-menu-dropdown-dark-notification-time-bg-color, 5%);
                                        }
                                    } 
                                }  
                            }
                        }                        
                    }
                }
            }
        } 

        /* Header seaech box */
        .search-form {
            background: $header-search-bg-color;

            &:hover {
                background: $header-search-bg-hover-color;
            }

            .input-group {
                .form-control {
                    color: $header-search-font-color;

                    @include placeholder($header-search-placeholder-font-color); 
                }

                .input-group-btn { 
                    .btn.submit {  
                        > i {
                            color: $header-search-font-color;
                        }   
                    }
                }
            }
     
            &.open {
                background: $header-search-bg-color-on-open;
            }
        }

        /* Toggler button for sidebar expand/collapse and responsive sidebar menu */
        .menu-toggler {
            @include burger-icon-color-change($header-toggler-color, $header-toggler-color);
        }
    }

    /* Default Horizontal Menu */

    .page-header.navbar {

        /* Default Mega Menu */
        .hor-menu {
            .navbar-nav {
                /* Mega menu content */
                > li.mega-menu-dropdown {

                        > .dropdown-menu {
                            box-shadow: $header-hor-menu-box-shadow;

                            .mega-menu-content {

                                .mega-menu-submenu {

                                    li {
                                        > h3 {
                                            color: $header-hor-menu-mega-menu-header-font-color;
                                        }
                                    }
                                }
                            }
                        }
                }

                /* Classic menu */
                > li {
                    > a {
                        color: $header-hor-menu-default-link-font-color;

                        > i {
                            color: $header-hor-menu-default-link-icon-color;
                        }
                    }

                    &:hover > a,
                    &.open > a,
                    > a:hover {
                        color: $header-hor-menu-default-link-font-color-on-hover ;      
                        background: $header-hor-menu-default-link-bg-color-on-hover !important;

                        > i {
                            color: $header-hor-menu-default-link-icon-color-on-hover;
                        }
                    }

                    &.active,
                    &.current {
                        > a,
                        > a {
                            color: $header-hor-menu-default-link-font-color-on-active;
                            background: $header-hor-menu-default-link-bg-color-on-active !important; 

                            > i {
                                color: $header-hor-menu-default-link-icon-color;
                            }
                        }
                        
                        .selected { 
                            border-top: 6px solid $header-hor-menu-default-link-bg-color-on-active;
                        }
                    }

                    .dropdown-menu {
                        box-shadow: $header-hor-menu-box-shadow; 
                        background: $header-hor-menu-dropdown-menu-bg-color;

                        li {

                            > a {
                                color: $header-hor-menu-dropdown-menu-link-font-color;  

                                > i {
                                    color: $header-hor-menu-dropdown-menu-link-icon-color;
                                }
                            }

                            &:hover {
                                > a {
                                    color: $header-hor-menu-dropdown-menu-link-font-color-on-hover;
                                    background: $header-hor-menu-dropdown-menu-link-bg-color-on-hover;  

                                    > i {
                                        color: $header-hor-menu-dropdown-menu-link-icon-color-on-hover;
                                    }
                                }
                            }

                            &.active,
                            &.current {
                                > a,
                                > a:hover {
                                    color: $header-hor-menu-dropdown-menu-link-font-color-on-active;
                                    background: $header-hor-menu-dropdown-menu-link-bg-color-on-active; 

                                    > i {
                                        color: $header-hor-menu-dropdown-menu-link-icon-color-on-active;
                                    }
                                }
                            }

                            &.divider {
                                background-color: lighten($header-hor-menu-dropdown-menu-bg-color, 5%);
                            }
                        }
                    }

                    .dropdown-submenu {
                        > a:after {
                            color: $header-hor-menu-dropdown-menu-link-icon-color;
                        }
                    }  
                }            
            }
        }

        /* Light Mega Menu */
        .hor-menu.hor-menu-light { 
            .navbar-nav {
                /* Mega menu content */
                > li.mega-menu-dropdown {

                        > .dropdown-menu {
                            box-shadow: $header-light-hor-menu-box-shadow;

                            .mega-menu-content {

                                .mega-menu-submenu {

                                    li {
                                        > h3 {
                                            color: $header-light-hor-menu-mega-menu-header-font-color;
                                        }
                                    }
                                }
                            }
                        }
                }

                /* Classic menu */
                > li {
                    > a {
                        color: $header-light-hor-menu-default-link-font-color;

                        > i {
                            color: $header-light-hor-menu-default-link-icon-color;
                        }
                    }

                    &:hover > a,
                    > a:hover {
                        color: $header-light-hor-menu-default-link-font-color-on-hover;
                        background: $header-light-hor-menu-default-link-bg-color-on-hover;

                        > i {
                            color: $header-light-hor-menu-default-link-icon-color-on-hover;
                        }
                    }

                    &.open > a {
                        color: $header-light-hor-menu-default-link-font-color-on-onen !important;  
                        background: $header-light-hor-menu-default-link-bg-color-on-onen !important;

                        > i {
                            color: $header-light-hor-menu-default-link-icon-color-on-onen !important;  
                        }
                    }                    

                    &.active,
                    &.current {
                        > a,
                        > a:hover {
                            color: $header-light-hor-menu-default-link-font-color-on-active;
                            background: $header-light-hor-menu-default-link-bg-color-on-active; 

                            > i {
                                color: $header-light-hor-menu-default-link-icon-color;
                            }
                        }
                    }

                    .dropdown-menu {
                        box-shadow: $header-light-hor-menu-box-shadow;
                        background: $header-light-hor-menu-dropdown-menu-bg-color;

                        li {

                            > a {
                                color: $header-light-hor-menu-dropdown-menu-link-font-color;  

                                > i {
                                    color: $header-light-hor-menu-dropdown-menu-link-icon-color;
                                }
                            }

                            &:hover {
                                > a {
                                    color: $header-light-hor-menu-dropdown-menu-link-font-color-on-hover;
                                    background: $header-light-hor-menu-dropdown-menu-link-bg-color-on-hover;  

                                    > i {
                                        color: $header-light-hor-menu-dropdown-menu-link-icon-color-on-hover;
                                    }
                                }
                            }

                            &.active,
                            &.current {
                                > a,
                                > a:hover {
                                    color: $header-light-hor-menu-dropdown-menu-link-font-color-on-active;
                                    background: $header-light-hor-menu-dropdown-menu-link-bg-color-on-active; 

                                    > i {
                                        color: $header-light-hor-menu-dropdown-menu-link-icon-color-on-active;
                                    }
                                }
                            }

                            &.divider {
                                background-color: darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);
                            }
                        }
                    }

                    .dropdown-menu {
                        border: 1px solid darken($header-light-hor-menu-default-link-bg-color-on-onen, 5%);
                    }

                    > .dropdown-menu {                        
                        border-top: 0;
                    }
                }    
            }
        }
    }

    /* Page sidebar */

    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
    .page-sidebar {
        background-color: $bg-color;   

        /* Default sidebar */
        .page-sidebar-menu {

            /* 1st level links */

            > li {  
                > a {
                    border-top: 1px solid $sidebar-menu-devider-border-color;
                    color: $sidebar-menu-link-font-color;  

                    > i {
                        color: $sidebar-menu-link-icon-font-color; 
                    }

                    > i[class^="icon-"],
                    > i[class*="icon-"] {
                        @if $theme-name == "light" {
                            color: darken($sidebar-menu-link-icon-font-color, 15%); 
                        } @else if $theme-name == "light2" {
                            color: darken($sidebar-menu-link-icon-font-color, 15%);  
                        } @else {
                            color: lighten($sidebar-menu-link-icon-font-color, 5%);  
                        }
                    } 

                    > .arrow {
                        &:before,
                        &.open:before {  
                            color: $sidebar-menu-arrow-color;
                        }
                    }
                }

                &.heading {
                    > h3 {
                        color: darken($sidebar-menu-link-font-color, 23%);         
                    }
                }

                &:hover,
                &.open {
                    > a {
                        background: $sidebar-menu-link-bg-color-on-hover;
                        color: $sidebar-menu-link-font-color-on-hover;

                        > i {
                            color: $sidebar-menu-link-icon-font-color-on-hover;
                        }

                        > .arrow {
                            &:before,
                            &.open:before {  
                                color: $sidebar-menu-arrow-color-on-hover;
                            }
                        }
                    }
                }

                &.active,  
                &.active.open {
                    > a {
                        background: $sidebar-menu-link-bg-color-on-active;
                        border-top-color: transparent;
                        color: $sidebar-menu-link-font-color-on-active;

                        &:hover {
                            background: $sidebar-menu-link-bg-color-on-active;
                        }

                        > i {
                            color: $sidebar-menu-link-icon-font-color-on-active;
                        }

                        > .arrow {
                            &:before,
                            &.open:before {  
                                color: $sidebar-menu-arrow-color-on-active;
                            }
                        }
                    }
                }

                &.active + li {
                    > a {
                        border-top-color: transparent;
                    }
                }

                &.active.open + li {
                    > a {
                        border-top-color: $sidebar-menu-devider-border-color;
                    } 
                }

                &:last-child {
                    > a {
                        border-bottom: 1px solid transparent !important;
                    }
                }
            } 

            /* All links */

            li {
                > a {
                    > .arrow {
                        &:before,
                        &.open:before {  
                            color: $sidebar-menu-arrow-color;
                        }
                    }
                }

                &:hover {
                    > a {
                        > .arrow {
                            &:before,
                            &.open:before { 
                                color: $sidebar-menu-arrow-color-on-hover;
                            }
                        }
                    }
                }

                &.active {
                    > a {
                        > .arrow {
                            &:before,
                            &.open:before { 
                                color: $sidebar-menu-arrow-color-on-active;
                            }
                        }
                    }
                }
            }
            
            .page-sidebar-closed &:hover {
                .sub-menu {
                    background-color: $bg-color;
                }
            }

            .sub-menu {
                > li {
                    > a {
                        color: $sidebar-menu-sub-menu-link-font-color;

                        > i {
                            color: $sidebar-menu-sub-menu-link-icon-font-color;
                        }

                        > i[class^="icon-"],
                        > i[class*="icon-"] {
                            @if $theme-name == "light" {
                                color: darken($sidebar-menu-link-icon-font-color, 15%); 
                            } @else if $theme-name == "light2" {
                                color: darken($sidebar-menu-link-icon-font-color, 15%);  
                            } @else {
                                color: lighten($sidebar-menu-link-icon-font-color, 5%);  
                            }
                        } 

                        > .arrow {
                            &:before,
                            &.open:before { 
                                color: $sidebar-menu-arrow-color;
                            }
                        }
                    }  

                    &:hover,
                    &.open,
                    &.active {
                        > a {
                            background: $sidebar-menu-sub-menu-link-bg-color-on-hover !important;

                            > i {
                                color: $sidebar-menu-sub-menu-link-icon-font-color-on-hover;
                                @if $theme-name == "light" {
                                    color: darken($sidebar-menu-link-icon-font-color, 15%); 
                                } @else if $theme-name == "light2" {
                                    color: darken($sidebar-menu-link-icon-font-color, 15%);  
                                } @else {
                                    color: lighten($sidebar-menu-link-icon-font-color, 20%);  
                                }
                            }

                            > .arrow {
                                &:before,
                                &.open:before { 
                                    color: $sidebar-menu-arrow-color-on-hover;
                                }
                            }
                        }
                    }      
                }
            }        
        }

        /* light sidebar */
        .page-sidebar-menu.page-sidebar-menu-light {  

            /* 1st level links */
            > li {
                &:hover,
                &.open {
                    > a {
                        background: $light-sidebar-menu-link-bg-color-on-hover;  
                    }
                }

                &.active,  
                &.active.open {
                    > a {
                        background: $light-sidebar-menu-link-bg-color-on-active;
                        border-left: 4px solid $light-sidebar-menu-link-border-color;
                        color: $light-sidebar-menu-link-font-color-on-active;

                        &:hover {
                            border-left: 4px solid $sidebar-menu-link-bg-color-on-active;
                            background: $light-sidebar-menu-link-bg-color-on-hover; 
                        }

                        > i {
                            color: $light-sidebar-menu-link-icon-color-on-active;
                        }

                        > .arrow {
                            &:before,
                            &.open:before {  
                                color: $light-sidebar-menu-link-arrow-color-on-active;
                            }
                        }
                    }
                }

                .sub-menu {
                    background: $light-sidebar-menu-sub-menu-bg-color; 

                    > li {
                        &:hover,
                        &.open,
                        &.active {
                            > a {
                                background: $light-sidebar-menu-sub-menu-link-bg-color-on-hover !important;
                            }
                        } 
                    }   
                }
            }
        }

        .sidebar-toggler {
            @include burger-icon-color-change($header-toggler-color, $header-toggler-color);
            
            background: $header-toggler-bg-color; 

            &:hover {
                background: darken($header-toggler-bg-color, 5%); 
            }
        }

        /* Sidebar search */

        .sidebar-search {

            .input-group {
                border-bottom: 1px solid $sidebar-search-bottom-border-color;

                .form-control {
                    background-color: $bg-color;
                    color: $sidebar-search-input-font-color;
                    @include placeholder($sidebar-search-input-placeholder-font-color); 
                }

                .input-group-btn {              
                    .btn {
                        > i {
                            color: $sidebar-search-input-font-color;
                        }
                    }
                }
            }

            &.sidebar-search-bordered {
                .input-group {
                    border: 1px solid $sidebar-search-full-border-color;
                }
            }       

            .page-sidebar-closed &.open {
                .input-group {
                    background-color: $bg-color;
                }

                .remove {
                    > i {
                        color: $sidebar-search-input-font-color;
                    }
                }
            }

            &.sidebar-search-solid {

                .page-sidebar-closed & {  
                    .input-group {
                        background: none;
                    }
                }

                .input-group {
                    border: 1px solid $sidebar-search-bg-color;
                    background: $sidebar-search-bg-color;

                    .form-control {
                        background: $sidebar-search-bg-color; 
                    }
                }

                &.open .input-group {
                    border: 1px solid $bg-color;
                    background: $bg-color;

                    .form-control {
                        background: $bg-color; 
                    }
                }
            }
        }
    }

    .page-sidebar-reversed {   

        .page-sidebar-menu.page-sidebar-menu-light { 
            /* 1st level links */
            > li {
                &.active,  
                &.active.open {
                    > a {
                        border-left: 0;
                        border-right: 4px solid $light-sidebar-menu-link-border-color;
                     
                        &:hover {
                            border-left: 0;
                            border-right: 4px solid $sidebar-menu-link-bg-color-on-active;
                        }
                    }
                }
            }
        }
    }

    /******
    Page Footer 
    ******/

    .page-footer {
        .page-footer-inner {
            color: $footer-default-font-color;
        }
        
        .page-footer-fixed & {
            background-color: $footer-fixed-bg-color; 
        }
    }

    @media (min-width: $screen-md-min) { /* 992px */

        /* Sidebar menu closed */
        .page-sidebar-menu.page-sidebar-menu-hover-submenu {
            > li:hover {
                > .sub-menu {
                    box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);
                    
                    &.sidebar-toggler-wrapper,
                    &.sidebar-search-wrapper {
                        box-shadow: none;
                    }
                }
            }   
        }

        .page-sidebar-menu.page-sidebar-menu-closed {
            > li:hover {
                box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);

                &.sidebar-toggler-wrapper,
                &.sidebar-search-wrapper {
                    box-shadow: none;
                }

                > .sub-menu {
                    box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);
                    
                    &.sidebar-toggler-wrapper,
                    &.sidebar-search-wrapper {
                        box-shadow: none;
                    }
                }
            }            
        }

        /* Light sidebar menu */
        .page-sidebar-menu.page-sidebar-menu-light.page-sidebar-menu-closed {  
            > li.heading {
                padding: 0;
                margin-top: 15px;
                margin-bottom: 15px;
                border-top: 1px solid $sidebar-menu-devider-border-color !important;
            }
        }


        /* Fixed Sidebar */

        .page-sidebar-fixed:not(.page-footer-fixed) {
            .page-content {
                border-bottom: 0;
            }

            .page-footer {
                background-color: #fff;

                .page-footer-inner {
                    color: #333;
                }
            }
        }

        /* Boxed Layout */

        .page-boxed {
            background-color: $for-min-992px-page-boxed-bg-color !important;

            /* Page container */
            .page-container {
                background-color: $bg-color;
                border-left: 1px solid $for-min-992px-page-boxed-page-container-bg-color;
                border-bottom: 1px solid $for-min-992px-page-boxed-page-container-bg-color;
            }

            &.page-sidebar-reversed {
                .page-container {
                    border-left: 0;
                    border-right: 1px solid $for-min-992px-page-boxed-page-container-bg-color;
                }
            }

            &.page-sidebar-fixed {
                .page-container {
                    border-left: 0;
                    border-bottom: 0;
                }
            }

            &.page-sidebar-reversed.page-sidebar-fixed {
                .page-container {
                    border-left: 0;
                    border-right: 0;
                    border-bottom: 0;
                }
            }
     
            /* Page sidebar */

            &.page-sidebar-fixed {
                .page-sidebar {
                    border-left: 1px solid $for-min-992px-page-boxed-sidebar-fixed-border-color;
                }
            }
            
            &.page-sidebar-reversed.page-sidebar-fixed {
                .page-sidebar {
                    border-right: 1px solid $for-min-992px-page-boxed-sidebar-fixed-border-color;
                    border-left: 0; 
                }
            }

            /* Page footer */
            
            &.page-sidebar-fixed.page-footer-fixed {
                .page-footer {
                    background-color: $for-min-992px-page-boxed-bg-color !important;

                    .page-footer-inner {
                        color: $footer-default-font-color;
                    }
                }
            }
        }

         /* Sidebar Menu Wirh Hoverable Submenu */

        .page-sidebar-menu-hover-submenu {  
            li {
                &:hover { 
                    a {
                        > .arrow {   
                            border-right:8px solid $sidebar-menu-hover-sub-menu-bg-color;

                            .page-sidebar-reversed & {
                                border-left:8px solid $sidebar-menu-hover-sub-menu-bg-color;
                            }
                        }
                    }

                    > .sub-menu {
                        background: $sidebar-menu-hover-sub-menu-bg-color !important;
                    }                    
                }
            }
        }
    }

    @media (max-width: $screen-sm-max) { /* 991px */
        /* Page sidebar */
        .page-sidebar {
            background-color: $mobile-sidebar-menu-bg-color;
            
            .page-sidebar-menu {
                > li {
                    > a {
                        border-top: 1px solid $bg-color;
                    }

                    &:hover,
                    &.open {
                        > a {
                            background: $mobile-sidebar-menu-link-bg-color-on-hover;
                        }
                    }

                    &:last-child {
                        > a {
                            border-bottom: 0 !important;
                        }
                    }

                    .sub-menu {
                        background-color: $mobile-sidebar-menu-bg-color !important;
                    }
                }

                .sidebar-search {
                    input {
                        background-color: $mobile-sidebar-menu-bg-color !important;
                    }
                }
            }

            /* light sidebar */
            .page-sidebar-menu.page-sidebar-menu-light {  

                /* 1st level links */
                > li {
                    &:hover,
                    &.open { 
                        > a {
                            background: $mobile-light-sidebar-menu-link-bg-color-on-hover;  
                        }
                    }

                    &.active,  
                    &.active.open {
                        > a {
                            background: $mobile-light-sidebar-menu-link-bg-color-on-active; 

                            &:hover {
                                background: $mobile-light-sidebar-menu-link-bg-color-on-active;  
                            }
                        }
                    }

                    .sub-menu {
                        background: $mobile-light-sidebar-menu-sub-menu-bg-color !important;

                        > li {
                            &:hover,
                            &.open,
                            &.active {
                                > a {
                                    background: $mobile-light-sidebar-menu-sub-menu-link-bg-color-on-hover !important;
                                }
                            } 
                        }   
                    }
                }
            }
        }
    }

    @media (max-width: $screen-xs-min) { /* 480px */

        .page-header.navbar {
            /* Top menu */  
            .top-menu {
                background-color: $bg-color; 

                .page-header-fixed-mobile & {
                    background-color: $header-bg-color;  
                }
                
                .navbar-nav {
                    > li.dropdown-user {
                        .dropdown-toggle {                    
                            background-color: lighten($header-top-menu-bg-hover-color, 1%);

                            .page-header-fixed-mobile & {
                                background: none;
                            }

                            &:hover {
                                background-color: $header-top-menu-bg-hover-color;
                            }
                        }
                    }
                }
            }
        }
    } 

    /****
    Boby
    ****/     
 
    body {
      background-color: $bg-color; 
    }

/****
 CSS3 Spinner Bar
****/  

.page-spinner-bar > div,  
.block-spinner-bar > div {
    background: lighten($brand-main-color, 5%);
}