/* CSS Variables */
:root {
    --primary-color: #08284F; /*text-color, background-color button ,bordercolor button*/
    --secondary-color: #4767F5; /*text-color, background-color button ai popup,bordercolor button*/
    --accent-color: #DBE2FF; /*background , border,border-left*/
    --light-accent-color: #EFF6FC; /*background hover sidebar*/
    --text-primary: #201F1E; /*text-color*/
    --text-secondary: #272727; /*text-color*/
    --text-muted: #605E5C; /*text-color*/
    --text-light: #171D1E; /*text-color*/
    --background-light: #D2D9D2; /*background*/
    --background-white: white; /*background-color button,text-color button*/
    --background-modal: #EBF0F0; /*background, boarder popup*/
    --background-popup: #F1F2F3; /*background popup*/
    --warning-color: #f59e0b; /*text-color*/
    --warning-bg: #FFF4CE; /*background*/
    --warning-text: #D7734E; /*text*/
    --danger-bg: #FED9CC; /*background*/
    --danger-text: #C64E4E; /*color*/
    --border-color: #e2e8f0; /*boarder-color*/
    --hover-bg: #EDEBE9; /*boarder*/
  
}
/*hr manager*/
.timeoff-color {
    color: var(--primary-color) !important;
}

.time-off-status .badge.available {
    background-color: var(--primary-color) !important;
    color: var(--background-white) !important;
}

.time-off-status .badge.utilized {
    background-color: var(--light-accent-color) !important;
    color: var(--primary-color) !important;
}



.badge {
    background-color: var(--primary-color) !important;
    color: var(--background-white) !important;
}



.attendance-links .link {
    color: var(--primary-color) !important;
}

.time-out-btn {
    background-color: var(--primary-color) !important;

    color: white !important;
}

.time-off-value {
    color: var(--primary-color) !important;
}

.link float {
    color: var(--primary-color) !important;
}
.time-off-links .link {
    color:var(--primary-color) !important;
}
.time-off-links .link.warning {
    color: #CD960C !important;
}
.attendance-off-links .link {
    color: var(--primary-color) !important;
}

/*Login*/
.hrms-auth-overlay {
    background: #D5DDD5 !important;
}

    .hrms-auth-bg-video {
        background: #D5DDD5 !important;
    }
    /*   label {
        color: var(--text-primary) !important;
    }*/

    .hrms-auth-single-line-center {
        color: #08284F !important;
    }

    .hrms-auth-checkbox-container input[type="checkbox"]:checked {
        background: #08284F !important;
        border-color: #08284F !important;
    }


    .hrms-auth-forgot {
        color: #08284F !important;
    }



    .hrms-auth-footer {
        color: #171D1E !important;
    }

    .sigin {
        background-color: #08284F !important;
    }
    /*Forget password*/
    .forget {
        color: #08284F !important;
    }


.reset {
    background: var(--primary-color) !important;
}


    .hrms-auth-back-link-container a:hover {
        color: #08284F !important;
    }
    /*AI chat bot*/
    .assistant-icon-wrapper {
        background: var(--accent-color) !important;
    }


    .assistant-circle {
        background: var(--accent-color) !important;
    }

    .assistant-sub-greeting {
        color: var(--secondary-color) !important;
    }


    .tag {
        background: var(--light-accent-color) !important;
        color: var(--text-primary) !important;
    }


    .send-btn {
        background: var(--primary-color) !important;
    }
    /*top header*/
    /*    .top-row-content[b-jv39htfafr] {
        background: var(--background-white) !Important;
    }*/


    .breadcrumb-item a {
        color: var(--text-muted) !important;
    }


    .ask-ai-btn {
        background-color: var(--accent-color) !important;
    }


    .ask-ai-text {
        color: var(--primary-color) !important;
    }


    .breadcrumb [aria-current="page"] {
        color: var(--primary-color) !important;
    }
    /*Profile styling*/
    .status {
        color: var(--background-white) !important;
        background-color: var(--primary-color) !important;
    }
    /*Profile styling*/
    .custom-button {
        background-color: var(--secondary-color) !important;
    }


    .badge.subtle.primary {
        background: var(--accent-color) !important;
    }


    .badge.subtle.warn {
        background: var(--warning-bg) !important;
        color: var(--warning-text) !important;
    }


    .badge.subtle.danger {
        background: var(--danger-bg) !important;
        color: var(--danger-text) !important;
    }

    .action-upload {
        width: 200px !important;
    }
    /*sidebar style*/
    .nav-item[b-86edge8tsb] a.active {
        background-color: var(--light-accent-color) !important;
    }
    /*Manager dasboard*/
    .user-details h1 {
        color: var(--text-secondary) !important;
    }
    /*sidebar style*/


    .toggle-btn.active {
        background-color: var(--primary-color) !important;
    }


    .edit-widgets {
        color: var(--primary-color) !important;
    }


        .edit-widgets:hover {
            background: var(--primary-color) !important;
            color: var(--background-white) !important;
        }


    .edit {
        color: var(--primary-color) !important;
        transition: color 0.2s ease;
    }
    /*Employee dashboard*/
    .svg.edit-icon { /* add class="edit-icon" to the <svg> if needed */
        color: var(--text-primary) !important;
    }
    /*Employee dashboard*/
    .card-title {
        color: var( --text-secondary) !important;
    }

    .todo-header {
        color: var( --text-secondary) !important;
    }

    .view-as-label {
        color: var( --text-secondary) !important;
    }

    .payperiod {
    }

    .card-time {
        color: var( --text-secondary) !important;
    }
    /*    .badge {
        background: var(--accent-color);
        color: var(--primary-color) !important;
    }*/


    .time-details .time-value {
        color: var(--primary-color) !important;
    }


    .total-time {
        color: var(--text-primary) !important;
    }

    .time-links .link {
        color: var(--primary-color) !important;
    }


    .time-off-item p {
        color: var(--primary-color) !important;
    }



    .warning-icon {
        color: var(--warning-color) !important; /* orange */
    }

    .badge available active {
        background-color: var(--primary-color) !important;
    }
    /* Attendance details font color */
    .attendance-details {
        color: var(--primary-color) !important;
    }


    .attendance-metrics {
        color: var(--primary-color) !important;
    }


    .metric {
        color: var(--primary-color) !important;
    }

    .compliance {
        color: var(--primary-color) !important;
    }

        .compliance p {
            color: var(--primary-color) !important;
        }


    .compliance-value {
        color: var(--primary-color) !important;
    }


    .subtext {
        color: var(--primary-color) !important;
    }
    /* Widget popup font color */
    .editwidgets-container {
        color: var(--primary-color) !important;
        background: linear-gradient(rgb(245, 241, 233), rgb(224, 232, 224)) !important; /*new color*/
    }

    .title {
        color: var(--text-secondary) !important;
    }

    .description {
        color: var(--primary-color) !important;
    }


    .widget-item {
        color: var(--primary-color) !important;
    }


    .widget-name {
        color: var(--primary-color) !important;
    }


    .text-muted {
        color: var(--primary-color) !important;
    }
    /* Toggle switch and button colors */
    .toggle-switch {
        background-color: var(--border-color) !important;
        border-color: var(--primary-color) !important;
    }


        .toggle-switch.on {
            background-color: var(--primary-color) !important;
        }

    .toggle-knob {
        background-color: var(--background-white) !important;
        border-color: var(--primary-color) !important;
    }


    .toggle-switch.on .toggle-knob {
        background-color: var(--background-white) !important;
    }


    .save-button {
        background-color: var(--primary-color) !important;
        color: var(--background-white) !important;
        border-color: var(--primary-color) !important;
    }


    .reset-button {
        background-color: var(--background-white) !important;
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }


        .reset-button:hover {
            background-color: var(--primary-color) !important;
            color: var(--background-white) !important;
        }


    .close-btn {
        color: var(--primary-color) !important;
    }
    /*Things to do*/
    .todo-item {
        border-left: 4px solid var(--accent-color) !important;
    }

    .todo-button {
        background-color: var(--secondary-color) !important;
    }
    /*setting popup*/
    .modal-title {
        color: var(--text-secondary) !important;
    }

    .control-btn-primary {
        background: var(--primary-color) !important;
    }

    .control-btn-outline {
        background: transparent;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    .main-heading {
        color: var(--text-secondary) !important;
    }

    .shortcut-popup .checkbox:checked {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }



    .btn-text {
        color: var(--primary-color) !important;
    }


    .icon-circle {
        background: var(--accent-color) !important;
    }


    .view-all {
        color: var(--primary-color) !important;
    }

    .required {
        color: black !important;
    }

    .field-label {
        color: black !important;
    }
    /*hr manager dashboard*/
    .toggle-btn {
        color: var(--primary-color) !important;
    }

        .toggle-btn.active {
            background-color: var(--primary-color) !important;
            color: var(--background-white) !important;
        }

        .toggle-btn:hover:not(.active) {
            background: var(--primary-color) !important;
            color: var(--background-white) !important;
        }

    .in-office {
        color: var(--primary-color) !important;
    }

        .in-office .status-dot {
            background: var(--primary-color) !important;
        }
    /*companies*/
    .custom-popup .e-btn.e-outline.e-flat.e-primary {
        background-color: var(--primary-color) !important;
    }

    .branch-chip {
        background-color: var(--accent-color) !important;
    }
    /* Announcement Popup Styles */
    .dropdown-annoucement:hover {
        background: var(--primary-color) !important;
        color: var(--background-white) !important;
    }
    /*    .btn.dropdown-toggle {
        background-color: var(--background-white);
        color: var(--primary-color) !important;
    }*/

    .input-field, .dropdown {
        padding: clamp(0.4rem, 0.8vw, 0.5rem) clamp(0.6rem, 1.2vw, 0.75rem) !important;
    }

    .pin-toggle-input:checked + .pin-toggle-slider {
        background: var(--primary-color) !important;
    }

    .attach-button {
        background: var(--secondary-color) !important;
    }

    .action-button.publish {
        background: var(--primary-color) !important;
    }

    .action-button.drafts, .action-button.cancel {
        background: transparent;
        color: var(--primary-color) !important;
    }

        .action-button.drafts:hover {
            background-color: var(--primary-color) !important;
            color: var(--background-white) !important;
        }

        .action-button.cancel:hover {
            background-color: var(--primary-color) !important;
            color: var(--background-white) !important;
        }
    /*      Super Admin dashboard*/
    .period-btn.active[b-ohe5gv7861] {
        background: var(--primary-color) !important;
        color: var(--background-white) !important;
    }
    /*      Super Admin dashboard*/

    .metric-value.green[b-ohe5gv7861] {
        color: var(--primary-color) !important;
    }

    .note-text[b-ohe5gv7861] {
        color: var(--primary-color) !important;
    }
    /* Footer timeoff SVG colors */
/*    .footer-timeoff svg {
        stroke: var(--primary-color) !important;
    }*/
/*
        .footer-timeoff svg path {
            stroke: var(--primary-color) !important;
        }

        .footer-timeoff svg g {
            stroke: var(--primary-color) !important;
        }*/
    /* All footer SVGs */
    footer svg {
        stroke: var(--primary-color) !important;
    }
        /* All footer SVGs */

        footer svg path {
            stroke: var(--primary-color) !important;
        }

        footer svg g {
            stroke: var(--primary-color) !important;
        }
    /* Timeoff card font color */
    .timeoff-card {
        color: var(--primary-color) !important;
    }
    /*    Setting pages*/
    .edit-btn {
        color: var(--primary-color) !important;
    }

    nav.sidebars h4 {
        color: var(--secondary-color) !important;
    }

    nav.sidebars ul li a.active {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
    }

    .header, h2 {
        color: var(--text-secondary) !important;
    }

    .btn {
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .btn-light {
        background: var(--secondary-color) !important;
        border: 1px solid var(--secondary-color) !important;
    }

    .btn-primary {
        background-color: var(--primary-color) !important;
    }
    /*   setting page onboarding popupstyle*/
    .modal-onboarding {
        background: var(--background-modal) !important;
    }

    .modal-header-onboarding {
        background: var(--background-modal) !important;
        color: var(--primary-color) !important;
    }

    .modal-body-onboarding {
        background: var(--background-modal) !important;
    }

    .modal-footer-onboarding {
        background: var(--background-modal) !important;
    }

    .btn-create-task {
        background: var(--primary-color) !important;
    }

    .task-create-bar {
        background: var(--background-modal) !important;
        border: 1px solid var(--background-modal) !important;
    }

    .btn-create-onboarding {
        background: var(--primary-color) !important;
    }
    /*   setting page requesttime*/
    .leave-content {
        background: var(--background-modal) !important;
    }

    .btn-submit {
        background: var(--primary-color) !important;
    }
    /*create popup*/
    .popup {
        scrollbar-color: var(--primary-color) #e0e0e0 !important;
        background: var(--background-modal) !important;
    }

    .leave-popup .popup-title {
        color: var(--primary-color) !important;
    }

    .check {
        color: var(--primary-color) !important;
    }

    .draft {
        background: var(--primary-color) !important;
        color: var(--background-white) !important;
    }
    /*popupcode*/
    .custom-popup .e-dialog {
        background: var(--background-popup) !important;
    }

    .custom-popup .popup-title {
        color: var(--primary-color) !important;
    }

    .custom-popup .e-btn.e-outline.e-flat.e-danger {
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    .custom-popup .e-btn.e-outline.e-flat.e-success.e-primary {
        background: var(--primary-color) !important;
    }

    .assign-btn {
        color: var(--primary-color) !important;
        border: 2px solid var(--primary-color) !important;
    }

    .add-btn {
        background: var(--primary-color) !important;
    }

    .header h3 {
        color: var(--primary-color) !important;
    }

    .addBtn[b-8sdcgsuo6p] {
        background: var(--primary-color) !important;
    }

    .custom-checkbox-container input:checked ~ .custom-checkmark {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .leave-name {
        color: var(--primary-color) !important;
    }

    .toggle-container input:checked + .toggle-switch {
        background: var(--secondary-color) !important;
        outline-color: var(--secondary-color) !important;
    }

    .e-btn.e-outline.e-flat.e-success.e-primary {
        background: var(--primary-color) !important;
    }

    .pagination-controls button.active {
        border-bottom: 2px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    .badge.published {
        background: var(--accent-color) !important;
    }

    .svg {
        color: var(--background-white) !important;
    }
    /*tables styling*/
    .sf-grid .e-row:hover .e-rowcell {
        border-color: var(--hover-bg) !important;
        background: var(--light-accent-color) !important;
    }

    .bank-popup .popup-title {
        color: var(--primary-color) !important;
    }

    .bank-popup .e-btn.e-outline.e-flat.e-danger {
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }
    /*time tracking page*/
    .notifications-tab.active {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
    }

    .notifications-tab:hover {
        background: var(--accent-color) !important;
    }


    .download-btn {
        background: var(--primary-color) !important;
    }

    .notifications-approve {
        background: var(--primary-color) !important;
    }
    /*user management*/
    .tab-link.active {
        background: var(--accent-color) !important;
        border: 1px solid var(--accent-color) !important;
        color: var(--primary-color) !important;
    }

    .section-right button {
        background: var(--primary-color) !important;
    }

    .pagination-left span.active-page {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--accent-color) !important;
    }
    /*pannel styeling*/
    .left {
        background: var(--primary-color) !important;
        color: #fff;
    }

    .saveCloseBtn {
        background: var(--secondary-color) !important;
        color: var(--background-white) !important;
        border: 1px solid var(--secondary-color) !important;
    }
    /*    payroll*/
    .settings-btn {
        border: 1px solid var(--primary-color) !important;
    }

    .download-btn {
        border: 1px solid var(--primary-color) !important;
        background: none !important;
        color: var(--primary-color) !important;
    }
    /*  .text-center {
        background-color: var(--light-accent-color) !important;
    }*/
    /*
reports styling*/
    .toggle-switch.inactive {
        background: var(--light-accent-color) !important;
    }

    .toggle-switch.active {
        background: var(--primary-color) !important;
    }

    .custom-generate-button {
        background: var(--primary-color) !important;
    }

        .custom-generate-button:hover {
            background: var(--primary-color) !important;
        }

        .custom-generate-button:disabled {
            background: var(--primary-color) !important;
        }

    .popup-toggle {
        background-color: var(--light-accent-color) !important;
    }

        .popup-toggle.active {
            background-color: var(--primary-color) !important;
        }

    @media (max-width: 1024px) {
        .hrms-auth-logo {
            margin-top: 15px !important;
        }
    }
    /*profile*/
    .shift {
        color: var(--text-secondary) !important;
    }
    /*   svg COLORS*/
    /*superadmin*/
    .period-btn:hover[b-ohe5gv7861] {
        background: var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .company-select-item:hover {
        background: var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .chip.green {
        background: var(--light-accent-color) !important;
        color: var(--primary-color) !important;
    }

    .e-dialog.custom-popup .e-dlg-content.e-dlg-header-content.e-footer-content {
        background-color: var(--background-light) !important;
    }

    .icon-time {
        color: var(--primary-color) !important; /* SVG stroke color */
    }

    .attach-icon {
        color: var(--background-white) !important; /*new color SVG stroke color */
    }

    .icon-edit-pen {
        color: var(--primary-color) !important; /* default color (slate-500) */
    }

    .clock-hand {
        color: var(--primary-color) !important; /* SVG stroke color */
    }

.icon-triangle {
    color: #E3A68E !important;                                                                         /* new color */
}

    .icon-calendar {
        color: var(--primary-color) !important; /* Change this to any color you want */
    }

    .arrow-icon {
        color: var(--primary-color) !important; /* Change this to any color you want */
    }

    .icon-network {
        color: var(--primary-color) !important; /* Change this to any color you want */
    }

    .vrd-add-icon {
        color: var(--background-white) !important;
    }

    .vrd-prev-icon {
        color: var(--background-white) !important;
    }

    .vrs-edit-icon {
        color: var(--background-white) !important;
    }

    .vrs-icon {
        color: var(--primary-color) !important;
    }

    .reset {
        color: var(--background-white) !important;
    }

    .relod {
        color: var(--primary-color) !important;
    }

    .microphone-btn {
        background-color: var(--primary-color) !important;
    }
    /*new class add*/
    .check {
        accent-color: #4CAF50 !important; /* green */
        color: var(--background-white) !important;
    }

    .e-footer-content {
        background: var(--background-popup) !important;
    }

    .e-dlg-content {
        background: var(--background-popup) !important;
    }

    .e-dlg-header-content {
        background: var(--background-popup) !important;
    }

    .card-header h1 {
        color: var(--text-secondary) !important;
    }
    /*
Manager*/
    .attendance-off-item p {
        color: var(--primary-color) !important;
    }

    .attendance-off-item {
        color: var(--primary-color) !important;
    }

    .attendance-off-value {
        color: var(--primary-color) !important;
    }

    .badge available active {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
    }

    .badge utilized {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
    }
    /*Visiter pages*/
    .vis-logo {
        background: url("../images/Logo1.png") center center / contain no-repeat !important;
    }

    .logo {
        background: url("../images/Logo1.png") center center / contain no-repeat !important;
    }

    .beta-badge {
        display: none !important;
    }

    .vis-nav {
        background: #F2EEEA !important; /*new color*/
    }
    /*.nav {
    background: #E6E1DC !important;
}*/
    .hrms-auth-bg-video {
        background: #E0EBE9 80% / cover no-repeat !important; /*new color*/
        opacity: 0.16 !important;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid var(--background-white) !important;
    }

    .vis-input {
        border: 1px solid var(--background-white) !important;
    }

    .vis-remember-forget a {
        color: var(--primary-color) !important;
    }

    .vis-remember-forget label {
        color: var(--text-primary) !important; /*new color*/
        font-weight: 500 !important;
    }

    .vis-remember-forget input[type="checkbox"] {
        accent-color: var(--primary-color) !important;
    }

    .vis-btn {
        background-color: var(--primary-color) !important;
    }

    .group {
        background-color: var(--primary-color) !important;
    }

    .nav-item.text-success {
        color: var(--primary-color) !important;
    }

    .nav-item {
        color: var(--primary-color) !important;
    }

    .attach-button {
        background-color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .next-button {
        background-color: var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .cancel-button {
        background-color: var(--primary-color) !important;
        color: var(--background-white) !important;
    }

    .vrd-add-button:hover {
        background-color: var(--primary-color) !important;
    }

    .vrd-add-button {
        background-color: var(--primary-color) !important;
    }

    .vrd-add-button {
        color: var(--background-white) !important;
    }

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--background-white) !important;
}

        .vrd-cancel-button {
            background-color: var(--primary-color) !important;
        }

        .vrd-prev-button {
            background-color: #C7D1FF !important;
            border-color: #C7D1FF !important;
        }

        .vrd-next-button {
            background-color: var(--primary-color) !important;
        }

        .text-visit {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .visit {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .medium {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .Register {
            background-color: var(--primary-color) !important;
        }

        .registration-text {
            color: var(--primary-color) !important;
        }

        .visitor-title {
            color: var(--primary-color) !important;
        }

        .new-visitor {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .visit-drop {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .safety-checkbox input:checked + .checkbox-custom {
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }

        .vist-prev-button {
            background-color: #C7D1FF !important;
            border-color: #C7D1FF !important;
        }

        .visit-next-button {
            background-color: var(--primary-color) !important;
        }

        .btn-text-secondary {
            color: var(--primary-color) !important;
        }

        .success-title, success-text {
            color: var(--primary-color) !important;
        }

        .success-text {
            color: var(--primary-color) !important;
        }

        .start-new-text {
            color: var(--primary-color) !important;
        }

        .gc-title {
            color: var(--primary-color) !important;
        }

        .gc-summary-label {
            color: var(--primary-color) !important;
        }

        .gc-card-name {
            color: var(--primary-color) !important;
        }

        .gc-prearrival-label {
            color: var(--primary-color) !important;
        }

        .gc-prearrival-text {
            color: var(--primary-color) !important;
        }

        .gc-prearrival-badge {
            background-color: var(--accent-color) !important;
        }

        .Edit-Visit {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .Cancel-Visit {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .vrs-label {
            color: var(--primary-color) !important;
        }

        .vister-id {
            background-color: none !important;
            color: var(--primary-color) !important;
        }
        /*payroll*/
        .btn-cancl {
            color: var(--background-white) !important;
            background-color: var(--primary-color) !important;
        }

        .btn-confirm {
            border: 1px solid var(--primary-color) !important;
            color: var(--primary-color) !important;
        }

        .custom-dialog.onboarding-popup .popup-title {
            color: var(--primary-color) !important;
        }

        .export-buttons .export-pdf, .export-buttons .export-excel {
            color: var(--primary-color) !important;
            border: 2px solid var(--primary-color) !important;
        }

        .e-chip-list.e-chip, .e-chip-list .e-chip {
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }

        .cd-button {
            border: 1px solid var(--primary-color) !important;
            color: var(--primary-color) !important;
        }

        .badge {
            background: var( --accent-color) !important;
            color: var(--background-white) !important;
        }
        /*background color-popup*/
        .bank-popup .e-dialog {
            background: rgb(243, 242, 241) !important; /*new color*/
        }

        .permission-header {
            background-color: var( --accent-color) !important;
        }

        .permission-row {
            background-color: var( --accent-color) !important;
        }

        .form-select {
            color: var(--text-secondary) !important;
        }

        .submit-btn {
            border: 1px solid var(--primary-color) !important;
            background: var(--primary-color) !important;
        }

.cancel-btn {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
        /*    hrmanager*/