/*New Branding*/
:root {
    --webapp-Magenta: #D3007A;
    --webapp-Magenta-hover: #A70061;
    --webapp-font-family: Montserrat;
    --webapp-mainmenu-bg: #FFFFFF;
    --webapp-mainmenu-fg: #3C3C3C;
    --webapp-mainmenu-underline: var(--webapp-Magenta);
    --webapp-mainmenu-caret-hover: #3C3C3C;
    --webapp-dropdown-menu-fg: var(--webapp-Magenta);
    --webapp-expander-header-bg: var(--webapp-Magenta);
    --webapp-expander-content-bg: #FFFFFF;
    --webapp-menubar-bg: var(--webapp-Magenta);
    --webapp-menubar-fg: #FFFFFF;
    --webapp-badge-notify-bg: var(--webapp-Magenta);
    --webapp-badge-notify-fg: #FFFFFF;
    --webapp-btn-white-bg: transparent;
    --webapp-btn-white-fg: #FFFFFF;
    --webapp-btn-white-hover-bg: var(--webapp-Magenta-hover);
    --webapp-btn-white-hover-fg: #FFFFFF;
    --webapp-btn-blue-border: var(--webapp-Magenta);
    --webapp-btn-blue-fg: #FFFFFF;
    --webapp-btn-blue-bg: var(--webapp-Magenta);
    --webapp-btn-blue-hover-bg: var(--webapp-Magenta-hover);
    --webapp-btn-blue-hover-fg: #FFFFFF;
    --webapp-ddl-blue-active-bg: #FFFFFF;
    --webapp-ddl-blue-active-fg: var(--webapp-Magenta-hover);
    --webapp-btn-green-bg: #FFFFFF;
    --webapp-btn-green-fg: var(--webapp-Magenta);
    --webapp-btn-green-border: var(--webapp-Magenta);
    --webapp-btn-green-hover-bg: var(--webapp-Magenta-hover);
    --webapp-btn-green-hover-fg: #FFFFFF;
    --webapp-btn-red-bg: transparent;
    --webapp-btn-red-fg: #A7A7A7;
    --webapp-btn-red-hover-bg: #D0021B;
    --webapp-btn-red-hover-fg: #FFFFFF;
    --webapp-btn-colorpicker-bg: transparent;
    --webapp-btn-colorpicker-fg: var(--webapp-Magenta);
    --webapp-btn-colorpicker-hover-bg: var(--webapp-Magenta);
    --webapp-btn-colorpicker-hover-fg: #FFFFFF;
    --webapp-ddl-bg: #FFFFFF;
    --webapp-ddl-fg: var(--webapp-Magenta);
    --webapp-ddl-hover-bg: var(--webapp-Magenta-hover);
    --webapp-ddl-hover-fg: #FFFFFF;
    --webapp-ddl-blue-bg: #E2E4E2;
    --webapp-ddl-blue-fg: #3C3C3C;
    --webapp-ddl-blue-hover-bg: var(--webapp-Magenta-hover);
    --webapp-ddl-blue-hover-fg: #FFFFFF;
    --webapp-ddl-green-bg: #FFFFFF;
    --webapp-ddl-green-fg: var(--webapp-Magenta);
    --webapp-ddl-green-hover-bg: #FFFFFF;
    --webapp-ddl-green-hover-fg: var(--webapp-Magenta);
    --webapp-c1ddl-hover-bg: var(--webapp-Magenta);
    --webapp-c1ddl-hover-fg: #FFFFFF;
    --webapp-checkbox-border-checked: #CCCCCC;
    --webapp-checkbox-bg-checked: #FFFFFF;
    --webapp-checkbox-fg-checked: var(--webapp-Magenta);
    --webapp-radio-bg-checked: var(--webapp-Magenta);
    --webapp-tab-bg: var(--webapp-Magenta);
    --webapp-tab-fg: #FFFFFF;
    --webapp-grid-odd-row-bg: #EFF1F0;
    --webapp-grid-odd-row-hover-bg: #FDF5FA;
    --webapp-grid-header-bg: #F3F3F3;
    --webapp-grid-header-fg: #212121;
    --webapp-grid-footer-bg: var(--webapp-Magenta-hover);
    --webapp-grid-footer-fg: #FFFFFF;
    --webapp-grid-scrollbar-bg: #DEB9D0;
    --webapp-grid-scrollbar-hover-bg: #DEB9D0;
    --webapp-control-border: #CCCCCC;
    --webapp-text-overwrite: var(--webapp-Magenta);
    --webapp-gridbtn-check: var(--webapp-Magenta);
    --webapp-box-shadow: #F7CEE8;
    --webapp-subheader-fg: #E2E4E2;
    --webapp-modal-bg: #FFFFFF;
    --webapp-input-bg: #FFFFFF;
    --webapp-input-fg: #555555;
    --webapp-input-disabled-fg: #AAAAAA;
    --webapp-contextmenu-fg: var(--webapp-Magenta);
    --rosterstrip-row-height: 40px;
    --rosterstrip-row-header-width: 150px;
    --rosterstrip-total-width: 100px;
    --rosterstrip-td-width: 50px;
    --rosterstrip-odd-row-color: #EFF1F0;
    --webapp-rostergrid-avail-bg: #FDD0D3;
    --webapp-page-background: #FFFFFF;
    --webapp-loader: url('/content/images/common/Load-Screen-Magenta.gif');
    --webapp-popup-background: url('/content/images/_wageloch/mbackground.png');
    --webapp-error-color: var(--webapp-Magenta);
    --webapp-tooltip-bg: #555555;
    --webapp-tooltip-fg: #FFFFFF;
    --webapp-box-bg: #FAFAFA;
    --webapp-timesheet-border-color: #050301;

    /* Payroll status colors for light theme */
    --webapp-payroll-submit-ato: rgba(211, 0, 122, 0.05);
    /* Draft Status (Yellow) */
    --webapp-payroll-status-draft-bg: rgba(255, 193, 7, 0.15);
    --webapp-payroll-status-draft-color: #D6A400;
    --webapp-payroll-status-draft-border: #FFC107;
    /* Processed Status (Blue) */
    --webapp-payroll-status-processed-bg: rgba(63, 81, 181, 0.15);
    --webapp-payroll-status-processed-color: #3F51B5;
    --webapp-payroll-status-processed-border: #3F51B5;
    /* Complete Status (Green) */
    --webapp-payroll-status-complete-bg: rgba(76, 175, 80, 0.15);
    --webapp-payroll-status-complete-color: #4CAF50;
    --webapp-payroll-status-complete-border: #4CAF50;
    /* Overdue task status (Red) - task list status pills (Tasks.aspx), in the same style as the payroll ones */
    --webapp-task-status-overdue-bg: rgba(229, 57, 53, 0.15);
    --webapp-task-status-overdue-color: #D32F2F;
    --webapp-task-status-overdue-border: #E53935;
}