//## Base theme color file

    /***********
    Theme Colors
    ***********/
    .theme-font-color {
        color: $brand-main-color;
    }

    /***********
    Body bg color
    ***********/

    body {
        background: $bg-color;

        &.page-md {
            background: lighten($bg-color, 3%);  
        }
    }

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

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

        /* Top notification menu/bar */
        .top-menu {  
            .navbar-nav {
                > li.dropdown {
                    .dropdown-toggle {
                        &:hover {
                            background-color: $header-top-menu-bg-hover-color;
                        }

                        > 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; 
                        }
                    }

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

                    .dropdown-menu {
                        &:before {
                            border-bottom-color: $header-top-menu-extended-dropdown-border-color;
                        }
                    }
                }

                > li.separator {
                    background: $header-top-menu-extended-separator-bg-color;
                }

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

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

                        &:before {
                            border-bottom-color: darken($header-top-menu-extended-dropdown-border-color, 5%);
                        }     

                        &: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-bg-color;

            .input-group {
                border: 1px solid $header-search-font-color;  

                &:hover {
                    border-color: darken($header-search-font-color, 5%);
                }

                .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;
                        }    
                    }
                }
            }
        }

        /* Menu Toggler */
        .menu-toggler {
            background-image: url(#{$layout-theme-img-path}#{$header-toggler-img});   
        }          

        .page-actions .btn-group .btn-sm.btn-transparent {
            background: none;
            border: 1px solid lighten($header-bg-color, 10%);
            color: lighten($header-bg-color, 20%);    

            > i {  
                color: lighten($header-bg-color, 20%);   
            }

            &:hover,
            &:focus,
            &.active {
                background: none;                
                border: 1px solid lighten($header-bg-color, 25%);
                color: lighten($header-bg-color, 25%);

                > i {
                    color: lighten($header-bg-color, 25%);   
                }
            }
        }
    }

    /* Page sidebar */

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

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

            /* 1st level links */
            > li {  

                &.heading {
                    > h3 {
                        color: $sidebar-menu-heading-font-color;    
                    }    
                }

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

                    @media (max-width: $screen-sm-max) { /* 991px */
                        border-top: 1px solid lighten($sidebar-bg-color, 8%);
                    }

                    > 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;
                        }
                    }
                }

                &: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;  
                        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 {
                    > a {
                        border-left: 3px solid $sidebar-menu-heading-font-color !important;
                        margin-left: -3px;
                        padding-left: 15px;
                    }
                }
            } 

            /* 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: $sidebar-menu-hover-sub-menu-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-sub-menu-link-icon-font-color, 15%); 
                            } @else if $theme-name == "light2" {
                                color: darken($sidebar-menu-sub-menu-link-icon-font-color, 15%);  
                            } @else {
                                color: lighten($sidebar-menu-sub-menu-link-icon-font-color, 5%);  
                            }
                        } 

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

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

                            background: $sidebar-menu-sub-menu-link-bg-color-on-hover !important;

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

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

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

    .page-footer {

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

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

    .page-boxed {
        .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);   
                }
            }   
        }

        .page-sidebar-menu.page-sidebar-menu-closed {

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

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

        /* Fixed Sidebar */

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

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

        /* Boxed Layout */

        .page-boxed {

            /* Page container */
            .page-container {
                background-color: $bg-color;
            }

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

            &.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;
                }
            }
        }

         /* 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-header.navbar {
            padding: 0;

            /* Top menu */  
            .top-menu {

                .navbar-nav {
                    > li.dropdown {
                        > .dropdown-toggle:hover {
                            background-color: darken($header-top-menu-bg-hover-color, 1%); 
                        }
                    }
                }
            }
        }
    }

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

        .page-header.navbar {
             background: $header-bg-color;
             border-bottom: 1px solid $header-mobile-menu-border;  

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

            .top-menu {
                
                .navbar-nav {          
                    > li.dropdown {
                        > .dropdown-toggle:hover {
                            background-color: darken($header-top-menu-bg-hover-color, 3%); 
                        }
                    }
                }
            }
        }
    } 

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

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