.ssp-theme-gen(@CSTopMenuColor, @CSTopMenuFontColor, @CSTopMenuActiveFontColor, @CSTopMenuButtonFontColor, @CSTopMenuActiveColor, @CSTopMenuButtonColor, @CSFormButtonColor, @CSTableHeadColor, @textcolor: #fff, @userprofile, @cogicon, @topinfo, @CSTopMenuActiveColor, @topMenuBorder, @CSTopMenuSearchInputBg, @CSTopMenuSearchIconBg, @CSTopMiscMenuFontColor, @CSTopMenuNavColor, @CSSaveOkColor, @userprofile) {
    .ssp-top-pane {
        background-color: @CSTopMenuColor;
        color: @CSTopMenuFontColor;

        & when(@topMenuBorder =true) {
            border-bottom: 1px solid #d3d3d3;
        }

        .top-pane-mid {
            #employeeSearch {
                &.top-pane-search {

                    .input-group {
                        .form-control {
                            background-color: @CSTopMenuSearchInputBg;
                        }

                        .classic-dropdown {
                            background-color: @CSTopMenuSearchIconBg;

                            .dropdown-menu {
                                color: @black;
                            }

                            .dropdown-toggle {
                                opacity: 1;
                            }
                        }
                    }

                }



            }
        }

    }


.ssp-top-pane .misc-area .misc-menu .navbar-nav > li.open > ul .user-profile a,
.nav-line-tabs .nav-tabs li.active a{
    border-bottom-color:@CSFormButtonColor;
}
    .ssp-top-pane .nav-area .top-menu li {
        >a {
            background-color: @CSTopMenuNavColor;
            color: @CSTopMenuFontColor;
            border-color: @CSTopMenuColor;

            & when(@topMenuBorder =true) {
                line-height: 13px;
            }
        }

        &.active {
            >a {
                background-color: @CSTopMenuActiveColor;
                color: @CSTopMenuActiveFontColor;
            }
        }

        &:hover {
            >a {
                // @CSTopMenuActiveColor
                // border-bottom-color: @CSActiveColor;
            }
        }

    }

    .ssp-top-pane .settings-btn {
        color: @CSTopMenuButtonFontColor;
        background-color: @CSTopMenuButtonColor;
    }

    .icn-cog-wheel-white {
        & when(@cogicon =false) {
            background-position: -252px -38px;
        }
    }

    .input-group-icon-btn .btn,
    .doubly-list .doubly-list-box ul > li.selected,
    .btn-theme,
    .layout-pane .lyt-body .lyt-lhs .lyt-lhs-panel-group .panel > .panel-collapse > .panel-body ul.lyt-lhs-drag-component > li > div,
    .layout-pane .lyt-body .lyt-lhs .lyt-lhs-panel-group .panel > .panel-collapse > .panel-body ul.lyt-lhs-drag-component > li > div > div.lyt-lhs-drag-tool,
    .file-browse .btn,
    .feedback-button,
    .file-upload .btn {
        background-color: @CSFormButtonColor;
        color: @textcolor;
    }
    .layout-pane .lyt-body .lyt-lhs .lyt-lhs-panel-group .panel > .panel-collapse > .panel-body ul.lyt-lhs-drag-component > li.dropped > div {
        background-color: #e4e4e4;
        color: #7d7d7d;
    }
    #employeeSearch {
        background-color: @CSTopMenuButtonColor;
        color: @textcolor;
    }

    .fw tr:not(.day-time-notation) th,
	.fw .panel-group:not(.panel-group2):not(.panel-classic) .panel-heading,
	.fw .input-group-addon,
    .ssp-table tr th,
    .panel-ssp>.panel-head,
    .panel-ssp>.panel-heading {
        background-color: @CSTableHeadColor;
        color: @textcolor;
    }
    .layout-pane .lyt-body .lyt-lhs .lyt-lhs-panel-group .panel > .panel-collapse > .panel-body ul.lyt-lhs-drag-component > li.dropped > div > div.lyt-lhs-drag-tool{
            background-color:#e4e4e4;
    }
    .ssp-top-pane .misc-area .misc-menu .navbar-nav>li {
        &.last {
            .caret {
                & when(@userprofile =false) {
                    color: @black;
                }

                & when(@userprofile =true) {
                    color: @white;
                }
            }
        }

        >a {
            & when(@userprofile =false) {
                // border-right-color: rgba(0, 0, 0, 0.2);
                color: @black;
            }

            & when (@userprofile =true) {
                // border-right-color: rgba(255, 255, 255, 0.2);
                color: @white;
            }

            .icn-alerts1 {

                & when(@userprofile =true) {
                    background-position: -337px -1395px;
                }

                & when(@userprofile =false) {
                    background-position: -177px -1329px;

                }


            }

            .count {
                color: @white  !important;
            }

            // color:@CSTopMiscMenuFontColor;
        }
    }

    .icn-hamburger-lg {
        & when(@userprofile =false) {
            background-position: -334px -1477px;
        }

        & when (@userprofile =true) {
            background-position: -310px -1477px
        }
    }

    .btn-primary {
        background-color: @CSSaveOkColor;
    }

    .daterangepicker .ranges li.active,
    .daterangepicker td.active,
    .daterangepicker td.active:hover,
    .daterangepicker .range_inputs .btn-sm.applyBtn {
        background-color: @CSSaveOkColor;
    }

    .lnav li.active a,
    .lnav>li li.active a,
    .vertical-line-tab .vertical-tab-nav > ul > li.active > a {
        border-left: 3px solid @CSSaveOkColor;
    }

    .icn-user {
        background-position: -61px -90px;

        & when(@userprofile =true) {
            background-position: -255px -1370px;
        }

        & when(@userprofile =false) {
            background-position: -233px -1370px;
        }

    }

    .icn-user-lg {
        background-position: -178px -1428px;

        & when(@userprofile =true) {
            background-position: -220px -1428px;
        }

        & when(@userprofile =false) {
            background-position: -259px -1428px;
        }

    }



    .icn-upgrade {

        & when(@userprofile =true) {
            background-position: -301px -1372px;
        }

        & when(@userprofile =false) {
            background-position: -278px -1372px;
        }

    }





    .icn-help {
        & when(@userprofile =true) {
            background-position: -245px -188px;
        }

        & when(@userprofile =false) {
            background-position: -231px -188px;
        }

    }

    // .bar.bar-theme {
    //     background-color: @CSTopMenuNavColor;

    //     & when(@userprofile =true) {
    //         color: @white;
    //     }

    //     & when(@userprofile =false) {
    //         color: @black;
    //     }
    // }

    // .animated-bell {
    //     & when(@userprofile =false) {
    //         // background-color: @black;
    //         // color: @white;
    //         // border: 1px solid @CSTopMenuColor;
    //         background-position: -178px -1330px;
    //     }

    //     & when(@userprofile =true) {
    //         // background-color: @white;
    //         // color: @black;
    //         // border: 1px solid @CSTopMenuColor;
    //          background-position:-337px -1395px;

    //     }
    //     .count {
    //         color:@white;
    //     }
    // }

    .CSTopMenuColor {
        background-color: @CSTopMenuColor  !important;
    }

    .CSTopMenuFontColor {
        color: @CSTopMenuFontColor  !important;
    }

    .CSTopMenuActiveColor {
        background-color: @CSTopMenuActiveColor  !important;
    }

    .CSTopMenuButtonColor {
        background-color: @CSTopMenuButtonColor  !important;
    }

    .CSTopMenuIconColor {
        color: @CSTopMenuIconColor  !important;
    }

    .CSTopMenuFontColor {
        color: @CSTopMenuFontColor  !important;
    }

    .CSTopMenuActiveFontColor {
        color: @CSTopMenuActiveFontColor  !important;
    }

    .CSTopMenuButtonFontColor {
        color: @CSTopMenuButtonFontColor  !important;
    }

    .CSSaveOkColor {
        background-color: @CSSaveOkColor  !important;
    }

    .CSTableHeadColor {
        background-color: @CSTableHeadColor  !important;
    }

    .CSActiveColor {
        border-color: @CSActiveColor  !important;
    }

    .CSTopMenuActiveColor {
        background-color: @CSTopMenuActiveColor  !important;
    }

    .CSFormButtonColor {
        background-color: @CSFormButtonColor  !important;
    }

    .CSFormButtonTextColor {
        color: @CSFormButtonTextColor  !important;
    }

    .CSSaveOkTextColor {
        color: @CSSaveOkTextColor  !important;
    }

    .CSTableHeadTextColor {
        color: @CSTableHeadTextColor  !important;
    }

    .white-bg {
        background-color: @white  !important;
    }

    .black-bg {
        background-color: @black  !important;
    }

    .white-fg {
        color: @white  !important;
    }

    .black-fg {
        color: @black  !important;
    }
}

@white: #fff;
@black: #000;
@userprofile: true;
@cogicon: true;
@topinfo: 1;
@IsLight: false;
@CSTopMenuNavColor: @white;
@CSTopMenuColor: @white;
@CSTopMenuFontColor: @white;
@CSTopMenuActiveColor: @white;
@CSTopMenuButtonColor: @white;
@CSTopMenuIconColor: @white;
@CSTopMenuFontColor: @white;
@CSTopMenuActiveFontColor: @white;
@CSTopMenuButtonFontColor: @white;
@CSTopMenuSearchInputBg: @white;
@CSSaveOkColor: @white;
@CSTableHeadColor: @white;
@CSActiveColor: @white;
@CSTopMenuActiveColor: @white;
@topMenuBorder: false;
@CSTopMenuSearchIconBg: @white;
@CSFormButtonColor: @white;
@CSFormButtonTextColor: @white;
@CSSaveOkTextColor: @white;
@CSTableHeadTextColor: @white;
@CSTopMiscMenuFontColor: @white;

body.ssp_theme_custom {
    .ssp-theme-gen(@CSTopMenuColor, @CSTopMenuFontColor, @CSTopMenuActiveFontColor, @CSTopMenuButtonFontColor, @CSTopMenuActiveColor, @CSTopMenuButtonColor, @CSFormButtonColor, @CSTableHeadColor, @textcolor: #fff, @userprofile, @cogicon, @topinfo, @CSTopMenuActiveColor, @topMenuBorder, @CSTopMenuSearchInputBg, @CSTopMenuSearchIconBg, @CSTopMiscMenuFontColor, @CSTopMenuNavColor, @CSSaveOkColor, @userprofile) !important;
}