/*
    Copyright:           Titan-Techs.
    Location:            Newtown, PA, USA
    Solution:            Subscription
    Project:             Subscription.Server
    File Name:           material-syncfusion-overrides.css
    Created On:          11-03-2025

    Summary:
        Syncfusion Material 3 Theme Component Overrides.
        This file contains brand color overrides for Syncfusion components,
        migrated from the old Fluent theme.

    Note:
        This file is intended to work with the customized material3-lite.css theme.
        It uses CSS variables defined in that file, such as:
          --color-sf-primary: 224, 56, 39 (Primary Brand Color)
          --color-sf-secondary: 255, 221, 125 (Secondary Brand Color)
          --color-sf-on-primary: 255, 255, 255 (Text on Primary)
*/


@font-face {
    font-family: 'speeddial-icons';
    font-style: normal;
    font-weight: normal;
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
}


/* ========================================
   APPBAR COMPONENT - START
   ======================================== */

.e-appbar.e-primary {
    background-color: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-on-primary));
    color: rgb(var(--color-sf-on-primary));
}

.e-appbar.e-primary .e-appbar-separator {
    border: none;
}

.e-appbar .e-btn.e-outline, .e-appbar .e-css.e-btn.e-outline {
    background: rgba(var(--color-sf-on-surface), 0.08);
    border-color: white;
    box-shadow: none;
    color: rgba(var(--color-sf-on-surface));
}

.e-appbar .e-btn.e-outline:hover, .e-appbar .e-css.e-btn.e-outline:hover {
    background: rgba(var(--color-sf-on-surface), 0.08);
    border-color: white;
    box-shadow: none;
    color: rgba(var(--color-sf-on-surface));
}

.e-btn.e-outline:focus, .e-css.e-btn.e-outline:focus {
    background: rgba(var(--color-sf-on-surface), 0.12);
    border: 1px solid rgb(var(--color-sf-secondary));
    color: rgba(var(--color-sf-on-surface));
}

.e-icons.e-menu:before {
    content: "\e799";
    color: white;
    font-size: 20px;
}

/* ========================================
   APPBAR COMPONENT - END
   ======================================== */

/* ========================================
   BUTTONS COMPONENT - START
   ======================================== */

/*
   New requirement for primary buttons: Dark gray, turning red-orange on hover.
   Using 'background' to override the base theme's linear-gradient.
*/
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: #3f3f3f;
    border-color: #3f3f3f;
    color: #ffffff;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover, .original:hover, .formatted:hover {
    background: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-on-primary));
}

/*
   Specific override for the button on the Login Page.
   This maps the old yellow button to the new secondary color.
*/
.grid-container .e-btn.e-primary,
.grid-container .e-css.e-btn.e-primary {
    background: #3f3f3f;
    border-color: #3f3f3f;
    color: #ffffff;
}

/*
   Migrating styles for custom icon buttons.
   The border is updated to use the Material theme's outline color.
*/
.buttonContain .e-icon-btn {
    border: 1px solid #ffffff;
    border-radius: 50%;
    height: 28px;
    margin-left: 7px;
    padding: 4px 2px !important;
    width: 28px;
}

.e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon {
    font-size: 14px;
}

/*
   Style for secondary buttons to map to the new secondary color.
   Using 'background' to override the base theme's linear-gradient.
*/
.e-btn.e-secondary,
.e-css.e-btn.e-secondary {
    background: rgb(var(--color-sf-secondary));
    border-color: rgb(var(--color-sf-secondary));
    color: rgb(32, 32, 32);
    box-shadow: none;
}

.e-btn.e-secondary:hover,
.e-css.e-btn.e-secondary:hover {
    background: rgb(230, 199, 113); /* Darker yellow for hover */
    border-color: rgb(230, 199, 113);
    color: rgb(32, 32, 32);
    box-shadow: none;
}

/* ========================================
   BUTTONS COMPONENT - END
   ======================================== */

/* ========================================
   SWITCH COMPONENT - START
   ======================================== */

/* When the switch is active (on), apply the primary brand color */
.e-switch-wrapper, .e-dialog .e-data-form .e-switch-wrapper {
    padding: 2px;
}

.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
}

/* Ensure the 'ON' text label uses the correct contrasting color */
.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    background-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-on-primary));
}

/* Maintain the active color on hover */
.e-switch-wrapper:hover .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    background-color: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
}

.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on,
.e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-on-primary));
}

.e-switch-wrapper .e-switch-off, .e-css.e-switch-wrapper .e-switch-off {
    background-color: rgb(var(--color-sf-primary), 0.3);
    color: rgba(var(--color-sf-on-surface));
}

.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on {
    color: rgba(var(--color-sf-on-primary), 0.50);
    opacity: 1;
    background-color: rgba(var(--color-sf-on-surface), 0.12);
}

/* Keep custom application-specific sizes */
.switchYesNo {
    width: 60px;
    height: 25px;
}

.switchSearch {
    width: 70px;
    height: 25px;
}

/* ========================================
   SWITCH COMPONENT - END
   ======================================== */

/* ========================================
   CHECKBOX COMPONENT - START
   ======================================== */

/* Apply primary brand color to the frame of a checked checkbox */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: rgb(var(--color-sf-primary)) !important;
    border-color: rgb(var(--color-sf-primary)) !important;
    color: rgb(var(--color-sf-on-primary));
}

/* Ensure the focused state also uses the primary brand color */
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
    box-shadow: none;
    color: rgb(var(--color-sf-on-primary));
}

/* ========================================
   CHECKBOX COMPONENT - END
   ======================================== */

/* ========================================
   RADIO BUTTON COMPONENT - START
   ======================================== */

/* Apply primary brand color to the border of a checked radio button */
.e-radio:checked + label::before {
    border-color: rgb(var(--color-sf-primary)) !important;
}

/* Apply primary brand color to the border on hover */
.e-radio:hover + label::before {
    border-color: rgb(var(--color-sf-primary)) !important;
}

/* Apply primary brand color to the inner circle of a checked radio button */
.e-radio:checked + label::after {
    background-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-primary)); /* This color is for the checkmark, which is usually the same as background for radio buttons */
}

/* Apply primary brand color to the inner circle on hover when checked */
.e-radio:checked + label:hover::after {
    background-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-primary));
}

/* Preserve custom application-specific class */
.radioMyCandidates {
    margin-left: 10px;
}

/* ========================================
   RADIO BUTTON COMPONENT - END
   ======================================== */

/* ========================================
   MULTISELECT COMPONENT - START
   ======================================== */

/* Style for selected chips in the MultiSelect component */
.e-multi-select-wrapper .e-chips {
    background-color: rgb(var(--color-sf-primary));
    border-radius: 4px;
    height: 25px;
    padding: 6px;
}

/* Style for the content (text) within the selected chips */
.e-multiselect .e-multi-select-wrapper .e-chips .e-chipcontent {
    font-size: 12px;
    -webkit-text-fill-color: rgb(var(--color-sf-on-primary));
}

/* Style for the close icon within the selected chips */
.e-multi-select-wrapper .e-chips .e-chips-close::before {
    font-size: 9px;
    -webkit-text-fill-color: rgb(var(--color-sf-on-primary));
}

/* Adjust margin for the close icon */
.e-multi-select-wrapper .e-chips-close {
    margin-right: 5px;
    margin-bottom: -5px;
}

/* Hover state for selected chips when not disabled */
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
    background-color: rgba(var(--color-sf-primary), 0.8); /* A slightly lighter shade for hover */
}

/* Override hover state for selected chips to maintain primary brand color */
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
    background-color: rgba(var(--color-sf-primary), 0.8); /* Maintain primary color on hover */
    -webkit-text-fill-color: rgb(var(--color-sf-on-primary)); /* Ensure text color remains on-primary */
}

.e-multi-select-wrapper .e-chips.e-chip-selected {
    background: rgb(var(--color-sf-primary));
}

/* ========================================
   MULTISELECT COMPONENT - END
   ======================================== */

/* ========================================
   TREEVIEW COMPONENT (Sidebar Navigation) - START
   ======================================== */

/* Override Syncfusion TreeView default margins and padding */
.e-sidebar {
    width: 250px;
}

.e-treeview .e-ul {
    margin: 0;
    padding: 15px 0 0 0;
}

.e-treeview .e-list-item {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 6px 8px 6px 3px;
    position: relative !important;
}

/* Fix full-row hover background dimensions */
.e-treeview .e-list-item .e-fullrow {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- TreeView Active State --- */
/* Apply a solid primary background to the active item */
.e-treeview .e-list-item.e-active:not(.e-has-child) > .e-fullrow {
    background-color: rgb(var(--color-sf-primary));
}

/* Set the text color of the active item to the on-primary color */
.e-treeview .e-list-item.e-active:not(.e-has-child) .e-list-text {
    color: rgb(var(--color-sf-on-primary));
}

/* Set the icon color of the active item to the on-primary color */
.e-treeview .e-list-item.e-active:not(.e-has-child) .e-list-icon {
    color: rgb(var(--color-sf-on-primary));
}


/* --- TreeView Hover State --- */
/* Apply a semi-transparent primary background on hover */
.e-treeview .e-list-item.e-hover:not(.e-has-child) > .e-fullrow,
.e-treeview .e-list-item.e-node-focus:not(.e-has-child) > .e-fullrow,
.e-treeview .e-list-item.e-hover:not(.e-has-child) > .e-fullrow,
.e-treeview .e-list-item.e-node-focus:not(.e-has-child) > .e-fullrow {
    background-color: rgba(var(--color-sf-primary));
}

/* Set the text color on hover to the on-primary color */
.e-treeview .e-list-item.e-hover:not(.e-has-child) .e-list-text,
.e-treeview .e-list-item.e-node-focus:not(.e-has-child) .e-list-text,
.e-treeview .e-list-item.e-active.e-hover:not(.e-has-child) .e-list-text,
.e-treeview .e-list-item.e-active.e-node-focus:not(.e-has-child) .e-list-text {
    color: rgb(var(--color-sf-on-primary));
}

/* Set the icon color on hover to the on-primary color */
.e-treeview .e-list-item.e-hover:not(.e-has-child) .e-list-icon,
.e-treeview .e-list-item.e-node-focus:not(.e-has-child) .e-list-icon {
    color: rgb(var(--color-sf-on-primary));
}

/* ========================================
   TREEVIEW COMPONENT (Sidebar Navigation) - END
   ======================================== */

/* ========================================
   RATING COMPONENT - START
   ======================================== */

/* Custom application-specific styles for rating component variants */
.ratingCandidateExpand .e-rating-container .e-rating-item-container {
    font-size: 16px;
}

.ratingGridCandidate .e-rating-item-container {
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    display: block;
    min-width: calc(1em + 8px);
    min-height: calc(1em + 8px);
    position: relative;
}

/* Align rating items to the start */
.e-rating-container {
    justify-content: start;
}

/* Apply primary brand color to the selected/intermediate rating icons */
.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon,
.e-rating-container .e-rating-item-container.e-rating-intermediate .e-rating-icon {
    background: linear-gradient(to right, rgb(var(--color-sf-primary)) var(--rating-value), transparent var(--rating-value));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 1px rgb(var(--color-sf-primary));
}

/* Maintain the primary brand color on hover for selected/intermediate icons */
.e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon,
.e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
    background: linear-gradient(to right, rgb(var(--color-sf-primary)) var(--rating-value), transparent var(--rating-value));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 1px rgb(var(--color-sf-primary));
}

/* ========================================
   RATING COMPONENT - END
   ======================================== */

/* ========================================
   SPINNER COMPONENT - START
   ======================================== */

/* Style for the label displayed with the spinner */
.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: rgb(var(--color-sf-primary));
    font-size: large;
    font-weight: 600;
}

/* Set the color of the moving part of the spinner to the primary brand color */
.e-spinner-pane .e-spinner-inner .e-spin-material .e-path-circle {
    stroke: rgb(var(--color-sf-primary));
}

/* Set the color of the spinner's track */
.e-spinner-pane .e-spinner-inner .e-spin-material .e-path-arc {
    stroke: var(--c-grayCF); /* Keeping the original light gray track color */
}

/* Overlay style for the spinner when inside a Grid */
.e-grid .e-spinner-pane {
    z-index: 12000;
    background-color: rgba(200, 200, 200, 0.5);
}

/* Helper class for a full-height spinner container */
.spinnerHeight {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 1);
    height: 100%;
    width: 100%;
}

/* Helper class for a smaller spinner container */
.spinnerSmall {
    height: calc(100% - 44px);
    margin-top: 44px;
}

/* ========================================
   SPINNER COMPONENT - END
   ======================================== */

/* ========================================
   MENU COMPONENT (AppBar Navigation) - START
   ======================================== */

.appMenu {
    margin-right: 50px;
}

.appMenu .e-menu-item {
    font-weight: 600;
    text-transform: uppercase;
}

.appMenu .e-menu-url {
    font-size: large;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--color-sf-on-primary)) !important; /* Text color on primary background */
}

/* Focused state for top-level menu items */
.appMenu li.e-focused .e-menu-url {
    color: rgb(var(--color-sf-secondary)) !important; /* Use secondary color for focus highlight */
}

/* Selected state for top-level menu items */
.e-menu-container .e-menu .e-menu-item.e-selected {
    background-color: rgb(var(--color-sf-on-primary)) !important; /* White background */
}

.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-url {
    color: rgb(var(--color-sf-primary)) !important; /* Primary color text on white background */
}

/* Styles for the popup menu items */
.e-menu-popup .e-menu-url {
    font-size: 10pt;
    color: rgb(var(--color-sf-on-surface)) !important; /* Standard text color for items on a surface */
}

.e-menu-popup .e-menu-item {
    margin: 0 !important;
    padding: 0 10px !important;
}

/* Caret color for top-level menu */
.e-menu .e-caret {
    color: rgb(var(--color-sf-on-primary)) !important;
}

/* Caret color for selected top-level menu item */
.e-menu .e-menu-item.e-selected .e-caret {
    color: rgb(var(--color-sf-primary)) !important;
}

/* Focused state for popup menu items */
.e-menu-popup .e-menu-item.e-focused {
    background-color: rgba(var(--color-sf-primary), 0.15) !important; /* Semi-transparent primary for focus */
}

/* ========================================
   MENU COMPONENT (AppBar Navigation) - END
   ======================================== */

/* ========================================
   PAGER COMPONENT - START
   ======================================== */

.e-pager {
    border: none;
}

/* Style for the pager arrow icons (next, prev, first, last) */
.e-pager .e-icon-next::before,
.e-pager .e-icon-last::before,
.e-pager .e-icon-first::before,
.e-pager .e-icon-prev::before {
    color: rgba(var(--color-sf-tertiary), 0.9); /* Darker yellow */
    font-weight: bold;
}

/* Style for disabled pager arrow icons */
.e-pager .e-icon-next.e-disable::before,
.e-pager .e-icon-last.e-disable::before,
.e-pager .e-icon-first.e-disable::before,
.e-pager .e-icon-prev.e-disable::before {
    color: var(--c-bbb); /* Gray color for disabled state */
    font-weight: normal;
}

/* Background for the pager container */
/*#divHeader, #divHeader div {
    background: #f6f6f6;
}*/

/* Default state for numeric pager items */
.e-pager .e-numericitem {
    background: var(--c-wh);
    min-width: 35px;
}

/* Hover state for non-active numeric pager items */
.e-pager .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
    background: rgba(var(--color-sf-primary), 0.8);
    color: rgb(var(--color-sf-on-primary));
    border-radius: 50%;
}

/* Style for the currently selected pager item */
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-on-primary));
    border-radius: 50%;
    border-bottom-color: transparent; /* Remove potential underline from base theme */
}


/* Ensure no box-shadow on focused current item */
.e-pager .e-currentitem.e-numericitem.e-focused {
    background: rgb(var(--color-sf-primary));
    box-shadow: none;
}

.e-pager .e-pager-default:hover {
    background: rgba(var(--color-sf-secondary), 0.8);
    color: rgba(var(--color-sf-on-background));
    opacity: 1;
    border-radius: 4px;
}

/* ========================================
   PAGER COMPONENT - END
   ======================================== */

/* ========================================
   RICH TEXT EDITOR COMPONENT - START
   ======================================== */

/* Font size for dropdown popup items — GLOBAL 13px (hits every portaled .e-ddl popup, not just the
   RTE). The pager's page-size popup alone runs 12px via a :has() fingerprint in grid-refresh.css. */
.e-dropdownbase .e-list-item {
    font-size: 13px !important;
}

#dropTokens {
    font-size: 13px;
}

/* Custom buttons used with the RTE */
.original, .formatted {
    background: linear-gradient(0deg, #3f3f3f, #3f3f3f, #3f3f3f);
    color: rgb(var(--color-sf-on-primary));
    border-radius: 3px;
    margin-left: 10px;
}

.original:disabled, .formatted:disabled {
    background-color: rgba(var(--color-sf-primary), 0.5);
    color: rgb(var(--color-sf-on-primary));
}

/* Custom container styles used with the RTE */
.resumeButtonContainer {
    height: 40px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: rgba(var(--color-sf-secondary), 0.2);
    align-content: center;
}

.resumeContentContainer {
    height: 281px;
    border: 1px solid #ccc;
    background: white;
    overflow-y: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.e-richtexteditor .e-rte-content, .e-richtexteditor .e-source-content {
    background: rgba(var(--color-sf-surface));
    color: #3f3f3f;
}

/* Assuming the toolbar is themed with a primary background, set icon colors to on-primary
.e-richtexteditor .e-rte-toolbar {
    background-color: rgb(var(--color-sf-primary));
} */

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons.e-justify,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons.e-align-right {
    color: rgb(var(--color-sf-on-primary));
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: rgba(var(--color-sf-primary), 0.5);
    border-color: rgba(var(--color-sf-outline-variant));
    border-style: solid;
    border-width: 0;
    border-radius: 4px;
    color: rgba(var(--color-sf-on-surface-variant));
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active .e-tbar-btn {
    border: 1px solid rgba(0, 0, 0, 0);
    background: rgba(var(--color-sf-primary), 0.35);
}

.e-rte-container {
    border: 1px solid #d2d2d2;
}

/* ========================================
   RICH TEXT EDITOR COMPONENT - END
   ======================================== */

/* ========================================
   SPEED DIAL COMPONENT - START
   ======================================== */

/* Background for the Speed Dial popup menu */
.e-speeddial-popup .e-speeddial-ul {
    background: rgba(var(--color-sf-primary), 1); /* 10% intensity of primary color */
}

/* Custom icon definitions for Speed Dial items */
[class^="speeddial-icon-"], [class*=" speeddial-icon-"] {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-icon) !important;
    font-size: 16px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: inherit;
    speak: none;
    text-transform: none;
}

.e-speeddial-popup {
    background: rgb(var(--color-sf-brand-primary));
}

.mpcicon:after {
    font-family: var(--font-icon);
    font-size: 24px;
    margin-left: -3px;
    color: rgb(var(--color-sf-primary)); /* Updated to primary color */
    content: "\eeaa";
    font-size: 16px;
    margin-left: 5px;
}

.speeddial-icon-close:before {
    content: "\ec4f";
}

.speeddial-icon-edit:before {
    content: "\eded";
}

.speeddial-icon-rating:before {
    content: "\f000";
}

.speeddial-icon-mpc:before {
    content: "\eeaa";
}

.speeddial-icon-skill:before {
    content: "\e9c4";
}

.speeddial-icon-education:before {
    content: "\ead7";
}

.speeddial-icon-experience:before {
    content: "\eecd";
}

.speeddial-icon-notes:before {
    content: "\ec6f";
}

.speeddial-icon-convert:before {
    content: "\ea8c";
}

.speeddial-icon-attachment:before {
    content: "\eea7";
}

.speeddial-icon-originalresume:before {
    content: "\efa7";
}

.speeddial-icon-formatresume:before {
    content: "\efb6";
}

.speeddial-icon-menu:before {
    content: "\efa2";
}

.speeddial-icon-contact:before {
    content: "\e96d";
}

.speeddial-icon-document:before {
    content: "\ebc3";
}

/* Positioning for the main FAB button.
   The offsets are measured against the grid's detail cell — see `.e-grid .e-detailcell` in
   grid-refresh.css, which is what makes that cell the FAB's containing block. Changing either file
   without the other moves the FAB: these numbers are only correct relative to that ancestor. */
.e-fab.e-btn.e-fab-top {
    top: 24px;
}

.e-fab.e-btn.e-fab-right {
    right: 70px;
    z-index: 20;
    border: none;
}

/* Main Floating Action Button (FAB) styling */
.e-btn.e-fab {
    background: rgb(var(--color-sf-primary)) !important; /* Primary color background */
    border-radius: 50%; /* Make the FAB button round */
    z-index: auto;
}

.e-btn.e-fab span {
    margin-left: auto;
    margin-right: auto;
}

/* Styling for individual items in the Speed Dial popup */
.e-speeddial-popup.e-speeddial-linear .e-speeddial-li {
    margin: 2px 5px;
}

.e-speeddial-popup.e-speeddial-vert-right .e-speeddial-li span {
    background-color: rgb(var(--color-sf-primary)); /* Primary color background */
    border-color: rgb(var(--color-sf-primary)); /* Primary color border */
    color: rgb(var(--color-sf-on-primary)) !important; /* On-primary text color */
}

.e-speeddial-popup.e-speeddial-vert-right .e-speeddial-li span:last-child {
    border: none;
    box-shadow: none;
}

.e-speeddial-popup.e-speeddial-vert-right .e-speeddial-li {
    background-color: rgb(var(--color-sf-primary)); /* Primary color background */
    border-color: rgb(var(--color-sf-primary)); /* Primary color border */
}

/* Hover state for Speed Dial popup items */
.e-speeddial-popup.e-speeddial-linear .e-speeddial-li:hover,
.e-speeddial-popup.e-speeddial-linear .e-speeddial-li:hover .e-speeddial-li-text,
.e-speeddial-popup.e-speeddial-linear .e-speeddial-li:hover .e-speeddial-li-icon {
    background-color: rgb(var(--color-sf-primary)) !important; /* Semi-transparent primary for hover */
    border-color: rgb(var(--color-sf-primary)) !important; /* Semi-transparent primary for hover */
    color: rgb(var(--color-sf-secondary)) !important; /* On-primary text color */
}

/* ========================================
   SPEED DIAL COMPONENT - END
   ======================================== */

/* ========================================
   TABS COMPONENT - START
   ======================================== */

/* Sets the background of the active tab to the primary color */
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-active::before,
.e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
    background: rgb(var(--color-sf-primary));
}

/* Sets the border of the tab content panels to a semi-transparent primary color */
div#tabCompany div[id^="e-content-tabCompany"],
div#tabCandidates div[id^="e-content-tabCandidates"],
div#tabRequisition div[id^="e-content-tabRequisition"],
div#tabDashboard div[id^="e-content-tabDashboard"] {
    border: 1px solid rgba(var(--color-sf-primary), 0.5);
    height: calc(100% - 15px);
    width: 99%;
}

/* Application-specific layout styles for tab content */
div#tabCompany div#e-content-tabCompany_0 div.divPanelContainerVertical {
    height: 100%;
    margin-bottom: 0;
}

div#tabCandidates div#e-content-tabCandidates_0 div.divPanelContainerVertical {
    height: 260px;
}

.e-tab .e-toolbar {
    border-top: none;
}

.e-tab.e-fill .e-tab-header {
    border-bottom: none;
}

/* ========================================
   TABS COMPONENT - END
   ======================================== */

/* ========================================
    DATA FORM COMPONENT - START
======================================== */

.formGroup legend {
    font-weight: bold;
    font-size: 20px !important;
    font-variant: small-caps;
    text-transform: uppercase;
    width: 98%;
}

.formGroupSecond {
    margin-top: 20px !important;
}

.e-data-form > div:nth-of-type(1) .formGroup {
    margin-top: 10px !important;
}

.e-data-form > div:nth-of-type(n+2) .formGroup {
    margin-top: 30px !important;
}

.e-data-form .validation-message {
    color: rgb(var(--color-sf-error)) !important; /* Ensure the brand's error color is used. */
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
    opacity: 1 !important;
}

.e-data-form .e-button-right .e-btn {
    border-radius: 5px;
}

.e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
    margin-top: 24px;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    width: 100%;
}

.e-data-form .e-group-title {
    color: rgba(var(--color-sf-primary), 0.75);
    font-size: 21px !important;
}

.e-data-form .e-form-label {
    color: black;
    font-weight: bold;
    font-size: 13px;
}

/* ========================================
    DATA FORM COMPONENT - END
======================================== */

/* ========================================
   DIALOG COMPONENT - START
   ======================================== */

.dialogPopup {
    border-radius: 5px;
    margin-right: 7px;
}

.dialogPopup .e-dlg-header-content {
    background: rgb(var(--color-sf-primary));
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: rgb(var(--color-sf-on-primary));
    padding: 0;
    height: 50px;
}

.dialogPopup .e-dlg-header {
    border-radius: 5px;
    color: rgb(var(--color-sf-on-primary));
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    line-height: 50px;
}

.dialogPopup .e-dlg-content {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 24px;
}

.dialogPopup .e-dlg-header-content + .e-dlg-content {
    padding-top: 16px !important;
}

/* Pre-defined Dialogs (Alert/Confirm) */
.e-confirm-dialog, .e-alert-dialog {
    border-radius: 6px;
}

.e-confirm-dialog .e-dlg-header-content + .e-dlg-content, .e-alert-dialog .e-dlg-header-content + .e-dlg-content {
    padding: 35px 24px;
}

.e-dlg-content {
    color: #3f3f3f;
}

.e-confirm-dialog .e-dlg-header {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.e-dlg-header, .e-dlg-header *, .e-dialog .e-dlg-header {
    color: rgb(var(--color-sf-on-primary));
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.e-confirm-dialog .e-dlg-header-content, .e-alert-dialog .e-dlg-header-content {
    background: rgb(var(--color-sf-primary));
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 8px 24px;
}

.e-confirm-dialog .e-dlg-overlay, .e-alert-dialog .e-dlg-overlay {
    background: rgba(var(--color-sf-scrim), 0.4);
}

.e-confirm-dialog .e-footer-content, .e-alert-dialog .e-footer-content {
    background: rgb(var(--color-sf-secondary), 0.2);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 8px 24px;
}

/* RETIRED 2026-06-19: the old absolute-positioned FormButtons "jugaad". All form dialogs now use the standard
   footer pattern (stdFooter + DialogTemplates FooterTemplate + form= submit), and OwnershipTransfer styles its
   own .e-button-right via its scoped .razor.css. Kept commented for reference / quick rollback.
.e-button-right {
    background: rgba(var(--color-sf-secondary), 0.2);
    bottom: 0;
    margin: 0;
    padding: 10px;
    position: absolute;
    right: 0;
}
*/

.dialogPopup .e-dlg-content {
    max-height: calc(100% - 105px);
    overflow-y: auto;
}

.dialogTimeline .e-dlg-content {
    max-height: 100%;
    overflow-y: auto;
}

.dialogPopup .e-dlg-content form {
    height: auto;
    margin-bottom: 15px;
    width: 100%;
}

/* ========================================
   DIALOG COMPONENT - END
   ======================================== */