/* Created Mar 15 2021 00:00 AM */
/* This document captures a list of style changes to focus on when customising the HRMS for a client */

/***************** DEFAULT CHANGES FOR CUSTOMISATION. DO NOT REMOVE *******************/

html,body,#rhs_navigation_bar, .admin-app-wrapper, #lhs_navigation_bar .module-links ul li:hover,#lhs_navigation_bar .module-links ul li .nav-link .link-name ul{
    background-color: #eeeeee !important;
    color:  #000;
}
#rhs_navigation_bar{
    border-left: 1px solid #d8d8d8 !important;
}
#main_body_content_wrapper .row.row-up~hr {
    box-shadow: 0 -1px 0px #d8D8D8 !important;
}
#rhs_navigation_bar .rhs_links .icon-link{
    background-color: #ffffff !important;
    filter: grayscale(1) !important;
}
#rhs_navigation_bar.opened .rhs_links .icon-link{
    background-color: transparent !important;
    filter: grayscale(1) !important;
}
#rhs_navigation_bar.opened .icon-link~.icon-name:after{
    border-bottom: 1px solid #ffffff !important;
}
#lhs_navigation_bar .module-links ul li .nav-link .link-name ul li a:hover {
    background-color: #dfdfdf !important;
}
#lhs_navigation_bar .module-links ul li .nav-link .link-name ul li a {
    border-bottom: 1px solid #ffffff !important;
}
#lhs_navigation_bar .module-links ul li .nav-link .link-name{
    border-bottom: 1px solid #eeeeee !important;
    color: #000000;
}
#lhs_navigation_bar {
    border-right: 1px solid #d8d8d8 !important;
}
#main_header_top #lhs_collapse_trigger {
    color: #848484 !important;
}
#main_body_content_wrapper .head-search {
    border: 1px solid #d8d8d8 !important;
    background: #eeeeee !important;
}
#main_body_content_wrapper .page-title,
.admin-inapp-exitheader {
    color: #494949 !important;
}
#ess_main_header .ess-head-content .top-content .main-links>.nav>li>a{
    /* color: #333 !important; */
    color: var(--main) !important;
}
#ess_main_header .logo-box{
    overflow: hidden;
    padding: 5px;
}
.custom--shr-card{
    border: 1px solid #d8d8d8 !important;
}
.custom--shr-card .shr-card-title{
    color: #000000 !important;
}
#ess_main_header .ess-head-content .base-content .page-heading h5{
    /* color: #494949 !important; */
    color: var(--main) !important;
}
.fade-horizontal:after {
    background-image: linear-gradient(90deg,transparent 0%,#eeeeee 50%) !important;
}
.company-hrms-logo img, .empty-state-image img, .list-group-profiler img {
    filter: grayscale(1) !important;
}
.heads-dashboard-stats img{
    filter: grayscale(1);
}
.card-dashboard-hero, .card-dashboard-hero:after{
    background-color: rgba(0,0,0,0.4) !important;
}
.employee-image .img-dummy{
    background-color: var(--accent) !important;
}
.dash-quick-links::-webkit-scrollbar-thumb{
    background-color: #666 !important;
}
.dash-quick-links::-webkit-scrollbar-thumb:hover{
    background-color: #333 !important;
}
#homeContent .company-logo{
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}
/***************** END OF DEFAULT CHANGES FOR CUSTOMISATION. *******************/


/* NAME OF CLIENT: FMDQ */
/* DATE CREATED: 06/2021 */
/* CREATED BY: FAMILONI TOBI */

/* SAVE BRAND'S VARIABLES *********************** */
:root {
    --main: #102530;
    --darker_main: #06262D;
    --lighter_main: #314f5c;

    --accent: #b97231;
    --darker_accent: #8c5125;
    --lighter_accent: #ca834d;

    --crescent: rgb(150, 152, 154);
    --darker_crescent: rgb(117, 119, 121);
    --lighter_crescent: rgb(184, 187, 190);

    --firmanent: rgb(150, 152, 154);
    --darker_firmanent: rgb(117, 119, 121);
    --lighter_firmanent: rgb(184, 187, 190);

    --seablue: rgb(150, 152, 154);
    --seagreen: rgb(150, 152, 154);

    --lightgray: rgb(184, 187, 190);
    --gray: rgb(150, 152, 154);

    --brand_gradient: linear-gradient(90deg, var(--lighter_main), var(--darker_main));

    --border_radius: 3px;
}
/* END OF SAVE BRAND'S VARIABLES *************** */


/* Change the color of admin control panel hero section */
/* TARGET: ADMIN */
.section-head-admin{
    filter: grayscale(0);
}
.section-head-admin:after{
    background-color: #0f1e4680 !important;
    filter: grayscale(1); 
}

/* Change the color of admin control panel & module app icons */
/* TARGET: ADMIN */
/* .card-stat .app-icon img,
#lhs_navigation_bar .module-details .mod-img img {
    filter: grayscale(0.5);
} */

/* Change color of module landing hero section */
/* TARGET: ADMIN */

.admin-inapp-exit::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(252 184 22 / 22%);
    left: 0;
    top: 0;
    z-index: 1;
}

/* Change the background-color of module hero section */
/* TARGET: ADMIN */
.admin-inapp-exit {
    background-color: #ffffff !important;
}

/* Change the color of quick links under module hero section */
/* TARGET: ADMIN */
.dash-quick-links .link-card {
    color: var(--main) !important;
}

/* Change the color header portion of the collapsible left sidebar */
/* TARGET: ADMIN, SUPERVISOR */
#lhs_navigation_bar .module-details {
    background-color: var(--main) !important;
}

#lhs_navigation_bar .module-details.dropdown img {
    filter: grayscale(1);
}

/* Change the color of the collapsible left sidebar */
/* TARGET: ADMIN, SUPERVISOR */
#lhs_navigation_bar .module-links ul li .nav-link.active{
    background-color: var(--darker_main);
}
#lhs_navigation_bar .module-links ul li .nav-link .icon {
    color: var(--main) !important;
}
#lhs_navigation_bar .module-links ul li .nav-link.active .icon {
    color: var(--accent) !important;
}

/* Dropdown link color */
/* TARGET: ALL */
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: var(--main) !important;
}


/* Change all buttons and input border-radius */
/* TARGET: ALL */
.btn, .form-control,
#login-btn{
    /* border-radius: var(--border_radius) !important; */
    border-radius: 0px !important;
}
.onboarding_new input.custom-input,
.onboarding_new textarea.custom-input, textarea{
    border-width: 1px !important;
    border-left: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    border-top: 1px solid #ccc !important;
    border-radius: 3px;
}

/* Change all primary (blue) buttons */
/* TARGET: ALL */
.btn.btn-primary,
.btn.btn-info,
#login-btn,
.backstretch,
section#home,
.bg-blue{
    background-color: var(--main) !important;
}

.onboarding_new .border-blue, .staffstrength_new .border-blue, .btn-global {
    border-color: var(--accent) !important;
}
.onboarding_new .btn-action.text-dark, 
.staffstrength_new .btn-action.text-dark{
    color: #FFFFFF !important;
}
#login-btn:hover{
    color: #ffffff !important;
}

.btn.btn-info{
    background-color: var(--lighter_main) !important;
}

.btn.btn-primary:hover,
.btn.btn-info:hover{
    background-color: var(--darker_main) !important;
}
ul#view-profile-tabs.nav li.active a {
    border: solid 1px var(--accent);
    background-color: var(--accent);
    color: white;
}
.btn-global {
    border: solid 1px var(--accent) !important;
    background-color: var(--accent) !important;
    color: white !important;
}
ul#view-profile-tabs.nav li a{
    border: solid 1px var(--accent);
    color: var(--accent);
}

/* Change all secondary (green) buttons */
/* TARGET: ALL */
.btn.btn-success,
#callToActionBtn{
    background-color: var(--accent) !important;
    color: #fff !important;
}
.btn.btn-success:hover{
    background-color: var(--darker_accent) !important;
}

/* Change all warning (orange) buttons */
/* TARGET: ALL */
.btn.btn-warning{
    background-color: var(--accent) !important;
    color: #fff !important;
}
.btn.btn-warning:hover{
    background-color: var(--darker_accent) !important;
    color: #fff !important;
}

/* Change all active tab links */
/* TARGET: ALL */
.nav.nav-chart .active a, .nav.nav-chart .active a:focus, .nav.nav-chart .active a:visited, .nav.nav-chart .active:hover a, .nav.nav-chart .active:hover a:focus, .nav.nav-chart .active:hover a:visited{
    border-color: var(--main) !important;
}

/* Change swticher button */
/* TARGET: ALL */
#main_header_top .btn-switch,
#ess_main_header .ess-head-content .top-content .btn-switch{
    color: var(--main) !important;
    background-color: #e1e3e4 !important;
}

/* profile completeness decoration */
/* TARGET: ALL */
.profile-completeness.pending{
    background-color: var(--main) !important;
    border-color: rgba(47, 68, 79, 0.18) !important;
}

/* Notify button */
/* TARGET: ALL */
#main_header_top .btn-notify,
#ess_main_header .ess-head-content .top-content .btn-notify{
    background-color: rgba(86, 99, 105, 0.18) !important;
    color: var(--accent) !important;
}

/* Change border top of admin control panel header */
/* TARGET: ADMIN */
#content_wrapper_layout_inner > #main_body_content_wrapper > #main_header_top{
    border-top: 5px solid var(--accent);
}

/* InApp Logo change */
/* TARGET: ADMIN */
#rhs_navigation_bar .brand-logo img {
    border-radius: 5px;
}
#rhs_navigation_bar .profile-img-base .icon-link,
.profile-image .image-alt, 
.onboarding_new table .border-circle, 
.staffstrength_new table .border-circle {
    background: var(--accent) !important;
    color: #ffffff !important;
}
#rhs_navigation_bar .profile-img-base .icon-link h4{
    color: #ffffff !important;
}

/* Active link color on admin tab */
/* TARGET: ADMIN */
.section-head-admin .nav li a.active {
    border-bottom: 5px solid var(--accent);
}

/* Self Service header border-top changes */
/* TARGET: ESS */
#ess_main_header{
    border-top: 5px solid var(--accent) !important;
}
#ess_main_header .dropdown-menu .dropdown-submenu .nav-link {
    color: var(--main);
}


/* Progress bar (blue) */
/* TARGET: ALL */
.progress-bar {
    background: var(--brand_gradient) !important;
    /* background-color: var(--firmanent) !important; */
}
.wizard-steps .step.is-active .step-number, .wizard-steps .step.is-completed .step-number {
    background: var(--main) !important;
}

/* Avatars */
/* TARGET: ESS */
.card-dashboard-hero .avatar-box,
.navbar-photo > div > div{
    background: var(--accent) !important;
    color: #ffffff !important;
}

/* Ess Dashboard */
/* TARGET: ESS */
.card-dashboard-hero:before{
    background-color: var(--darker_main) !important;
    opacity: 0.75 !important;
}
.card-dashboard-hero h6.text-success{
    color: #ffffff !important;
}
.profile-widget .content .action{
    color: var(--lighter_accent) !important;
}
.profile-widget .profile-score{
    background-color: var(--lighter_accent) !important;
    color: #ffffff;
}
.card-dashboard-hero #edit-profile-now svg path {
    fill: var(--lighter_accent) !important;
}
.performance-appraisal-card .performance-card-footer {
    background: rgb(252 184 22 / 17%) !important;
}
.nav-quick-links .nav-item .nav-link{
    color: var(--main) !important;
}
.dash-well.profile-fixed .header{
    background-color: var(--darker_main);
}
.default-image img{
    filter: grayscale(1);
}
.ess-dashboard-info-icon{
    background: #10253017 !important;
    color: var(--accent) !important;
}

/* Top-liners */
/* TARGET: ALL */
.top-liner.top-liner-blue {
    border-color: var(--main) !important;
}
.top-liner.top-liner-green,
.top-liner.top-liner-orange {
    border-color: var(--accent) !important;
}

/* Tables */
.table-top{
    border-bottom-color: var(--lighter_main);
}
table a#modalButton > div {
    background: var(--accent) !important;
}

/* All blue backgrounds changed to main color */
.blue-bg, .default-img, .panel.panel-xls .panel-body .table-container table thead th,  .bg-blue, .setupGuide,.appraisal-create-title-bar, .kpi-type-switch, .settings-top, .setting-content .title-bar,
#rhs_navigation_bar #companies-drop .list-group .list-group-item.active, #rhs_navigation_bar #companies-drop .list-group .list-group-item:hover, #rhs_navigation_bar #user-dropup .list-group .list-group-item.active, #rhs_navigation_bar #user-dropup .list-group .list-group-item:hover {
    background-color: var(--main) !important;
}

/* Change to Gold */
.green-bg,#main_header_top .notification-dropdown .dropdown-item>a .notification-bell {
    background-color: var(--accent) !important;
}

.dept-column .text-danger{
    color: #ffffff !important;
    opacity: 0.5 !important;
}