:root {
    /* Base Colors */
    --primary-bg: #ffffff;
    --text-primary-color: #000000;

    --color-body-bg: var(--primary-bg);
    --text-primary-color: #2d2d2d; /* primary text */
    --text-secondary-color: #6a6a6a; /* secondary text */
    --text-activelink-color: #3052A1; /* active link text color */
    --text-secondary-sub-color: #576482; /* light secondary text */

    --sidebar-navbar-border: #E8EBF2; /* sidebar / neutral border */
    --primary-border-color: #3052A1; /* primary border */
    --primary-btn-bg-color: #3052A1; /* primary bg */
    --input-border-color: #B3C0DE; /* input border */
    --column-border-color: #E8EBF2; /* coulmn border */

    --column-bg-color: #F7F9FE; /* coulmn bg */
    --dashboard-card-bg: #F8FAFF; /* dashboard card bg */
    --column-border-light-color: #f0f0f0; /* Used for action menu & table & custom dropdown  borders */
    --column-bg-light-color: #f9f9f9; /* (especialy table) coulmn light  bg */
    --kyc-step-active-bg: #FAFBFE; /* kyc step active bg */

    /* dropdowns and action menu list hover bg and text */
    --primary-text-activehovercolor: var(--text-activelink-color);
    --primary-bg-hovercolor:#EFF4FF;  /*  #94B4FF */

    /* Gradients */
    --input-disabled-autofetch-bg: #f5f5f5; /* input disable & autofetch bg */
    --color-gradient-sidebar-active: linear-gradient(90deg, rgba(148, 180, 255, 0.5) 0%, rgba(48, 82, 161, 0) 100%);
    --color-gradient-navbar-hover: linear-gradient(to right, #94B4FF, #ffffff);
    --dashboard-gradient-bg: linear-gradient(299.46deg, #0F1224 2.92%, #21428F 100%);

    --input-checkbox-toggle-radio-inactive-bg: #c0c0c0;
    --button-disabled-bg-color: #b2b2b2; /* disabled */
    --color-search-bg: #F7F9FE;


    --color-step-bg: #12b28c;
    --color-step-line-bg: #94B4FF;
    --color-step-checked-bg: #3052A1;
    --color-otp-verified-bg: #f9fff7;
    --color-dropdown-scrollbar: #cccccc94;

    /* Greens */
    --color-green-dark: #598a3f;
    --color-toggle-btn: #3052A1;
    --color-green-primary: #43a512;
    --not-match:#FFA500;
    /* --color-green-primary: #43a512;
    --color-green-light: #edf7e7;
    --color-green-hover: #f2fbf7;
    --color-green-sidebar: #cddc42;
    --color-profile-active-border: #d1df4f; */

    /* Reds */
    --color-red-primary: #db0e15;
    --color-red-text-light-bg: #de1e1e;
     --color-red-error: #ff4242;
     --reject-color:#F80F0F;
    /*
    --color-red-dark: #f44336;
    --color-red-text-light-bg: #de1e1e; */

    /* UI Specific */
    --color-muted-text-light: #888888;
    --color-table-filter-shadow: #43a5121a;
    --color-toggle-content-bg: #f8f8f8;
    --color-toggle-content-border: #e6e6e6;
    --popup-content-bg-color: var(--column-bg-color);
    --color-table-highlight-text: var(--text-activelink-color);
    --popup-bg-overlay: #00000066;
    --popup-box-shadow: #00000057;

    /* /// sidebar section /// */
    --sidebar-bg: var(--primary-bg);
    --sidebar-border: var(--sidebar-navbar-border);
    --sidebar-list-text: var(--text-primary-color);
    --sidebar-list-active-textcolor: var(--primary-text-activehovercolor);
    --sidebar-list-active-bgcolor: #FBFCFF;


    /* /// Navbar section /// */
    --navbar-bg: var(--primary-bg);
    --navbar-border: var(--sidebar-navbar-border);
    --navbar-main-text: var(--text-primary-color);
    --navbar-main-text-active: #3052A1;
    --navbar-sub-text: var(--text-secondary-color);
    --navbar-list-hover-bg: var(--color-gradient-navbar-hover);
    --navbar-list-hover-textcolor: var(--primary-text-activehovercolor) ;
    --navbar-list-hover-border: var(--primary-border-color);

    /* /// table section /// */

    /* table filter */
    --table-filter-maintext: var(--text-primary-color);
    --table-filter-subtext: var(--text-secondary-color);
    --table-filter-bg-color: #3052A11A;
    --table-filter-secondary-border: var(--column-border-color);
    --table-filter-secondary-activeborder: var(--primary-border-color);
    --table-filter-secondary-activeshadow: var(--primary-btn-bg-color);

    /* table */
    --table-head-bg: #F5F8FF;
    --table-head-text-color: var(--text-primary-color);
    --table-cell-bg: var(--primary-bg);
    --table-head-border : #C4CCE0;
    --table-cell-border: var(--column-border-color);
    --table-cell-maintext-color: var(--text-primary-color);
    --table-cell-subtext-color: var(--text-secondary-color);
    --table-cell-hover-bg: #FBFCFF;
    --table-checkbox-checked-bg:#3052A1;
    --custom-dropdown-checkbox-checked-bg: var(--primary-border-color);

    --showentity-text-color: var(--text-secondary-color);
    --showentity-dropdown-bg: var(--primary-bg);
    --showentity-dropdown-border: var(--column-border-light-color);
    --showentity-dropdown-textcolor: var(--text-primary-color);
    --showentity-dropdown-list-bg: var(--primary-bg);
    --showentity-dropdown-list-border: var(--column-border-light-color);
    --showentity-dropdown-list-textcolor: var(--text-secondary-color);
    --showentity-dropdown-list-hover: var(--primary-bg-hovercolor);
    --showentity-dropdown-list-hovertext: var(--primary-text-activehovercolor);

    --pagination-border-color: var(--column-border-light-color);
    --pagination-bg-color: var(--primary-bg);
    --pagination-text-color: var(--text-activelink-color);
    --pagination-activetext-color: var(--primary-bg);
    --pagination-activebg-color: var(--primary-btn-bg-color);

    /* /// button elements /// */
    --btn-primary-bg: var(--primary-btn-bg-color);
    --btn-primary-border: var(--primary-border-color);
    --btn-primary-text-color: var(--primary-bg);

    --btn-secondary-bg: var(--primary-bg);
    --btn-secondary-border: var(--primary-border-color);
    --btn-secondary-text-color: #3052A1;

    --btn-disable-bg: var(--button-disabled-bg-color);
    --btn-disable-border: var(--button-disabled-bg-color);
    --btn-disable-text: var(--primary-bg);

    --btn-verify-bg: var(--color-green-dark);
    --btn-verify-text-color: var(--primary-bg);

    --btn-reject-bg: var(--color-red-primary);
    --btn-reject-text-color: var(--primary-bg);

    /* /// dropdown elements /// */

    --custom-dropdown-bg: var(--primary-bg);
    --custom-dropdown-border: #aaaaaa;
    --custom-dropdown-textcolor: var(--text-primary-color);
    --custom-dropdown-list-bg: var(--primary-bg);
    --custom-dropdown-list-border: var(--column-border-color);
    --custom-dropdown-list-textcolor: var(--text-secondary-color);
    --custom-dropdown-list-hover: var(--primary-bg-hovercolor);
    --custom-dropdown-list-hovertext: var(--primary-text-activehovercolor);

    /* /// Table action dropdown elements /// */

    --actionmenu-dropdown-list-bg: var(--primary-bg);
    --actionmenu-dropdown-list-border: var(--column-border-color);
    --actionmenu-dropdown-list-textcolor: var(--text-primary-color);
    --actionmenu-dropdown-list-hover: var(--primary-bg-hovercolor);
    --actionmenu-dropdown-list-hovertext: var(--primary-text-activehovercolor);

    /* /// form elements /// */
    --form-input-bg: var(--primary-bg);
    --form-input-border: var(--input-border-color);
    --form-input-focus-border: var(--primary-border-color);
    --form-input-autofetch-bg: var(--input-disabled-autofetch-bg);
    --form-input-autofetch-border: var(--input-disabled-autofetch-bg);
    --form-input-label-color: var(--text-primary-color);
    --form-input-label-subcolor: var(--text-secondary-color);
    --form-input-text-color: var(--text-primary-color);
    --form-input-text-placeholder: var(--text-secondary-color);
    --form-input-label-astriek: var(--color-red-primary);

    --form-input-upload-border: #eeeeee; /* dashed border */

    --form-checkbox-bg: var(--primary-bg);

    --form-dropdown-bg: var(--primary-bg);
    --form-dropdown-border: var(--input-border-color);
    --form-dropdown-textcolor: var(--text-primary-color);

    --form-dropdown-list-bg: var(--primary-bg);
    --form-dropdown-list-border: var(--color-border-dropdown);
    --form-dropdown-list-textcolor: var(--text-secondary-color);
    --form-dropdown-list-hover: var(--primary-bg-hovercolor);
    --form-dropdown-list-hovertext: var(--primary-text-activehovercolor);

    --form-otp-input-bg: var(--primary-bg);
    --form-otp-input-border: var(--input-border-color);
    --form-otp-input-text: var(--text-primary-color);
    --form-otp-input-focus-border: var(--primary-border-color);
    --form-otp-input-valid-border: var(--primary-border-color);
    --form-otp-input-invalid-border: var(--color-red-error);
}