pixel-react 1.4.8 → 1.4.9

package/lib/components/AddButton/AddButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './AddButton.scss';
+import { AddButtonProps } from './types';
+declare const AddButton: React.FC<AddButtonProps>;
+export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+declare const meta: Meta<typeof AddButton>;
+type Story = StoryObj<typeof AddButton>;
+export declare const PrimaryAddButton: Story;
+export default meta;

package/lib/components/AddButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AddButton';

package/lib/components/AddButton/types.d.ts

@@ -0,0 +1,4 @@
+export interface AddButtonProps {
+    name: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}

package/lib/components/AttachImage/AttachImage.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AttachImage from './AttachImage';
+import { AttachImageProps } from './types';
+declare const meta: Meta<typeof AttachImage>;
+export default meta;
+type Story = StoryObj<AttachImageProps>;
+export declare const Default: Story;

package/lib/components/Charts/BarChart/BarChart.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BarChart from './BarChart';
+declare const meta: Meta<typeof BarChart>;
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+export declare const BarChartDashboard: Story;

package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import IconRadialChart from './IconRadialChart';
+declare const meta: Meta<typeof IconRadialChart>;
+export default meta;
+type Story = StoryObj<typeof IconRadialChart>;
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const WithoutIcon: Story;

package/lib/components/Charts/LineChart/LineChart.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LineChart from './LineChart';
+import { LineChartProps } from './types';
+declare const meta: Meta<typeof LineChart>;
+export default meta;
+export declare const DefaultLineChart: StoryObj<LineChartProps>;
+export declare const StatusLineChart: StoryObj<LineChartProps>;

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MultiRadialChart from './MultiRadialChart';
+declare const meta: Meta<typeof MultiRadialChart>;
+export default meta;
+type Story = StoryObj<typeof MultiRadialChart>;
+export declare const Default: Story;
+export declare const numberLegend: Story;
+export declare const PillLegend: Story;

package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ConnectingBranch from './ConnectingBranch';
+declare const meta: Meta<typeof ConnectingBranch>;
+export default meta;
+type Story = StoryObj<typeof ConnectingBranch>;
+export declare const Default: Story;

package/lib/components/EditTextField/EditTextField.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import EditTextField from './EditTextField';
+import '../../assets/styles/_colors.scss';
+import './EditTextField.scss';
+declare const meta: Meta<typeof EditTextField>;
+type Story = StoryObj<typeof EditTextField>;
+export declare const textFieldWithLabel: Story;
+export declare const textFieldWithOutLabel: Story;
+export declare const openTextField: Story;
+export default meta;

package/lib/components/Editor/Editor.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { EditorProps } from './types';
+declare const meta: Meta<EditorProps>;
+export default meta;
+type Story = StoryObj<EditorProps>;
+export declare const Default: Story;

package/lib/components/Excel/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './ContextMenu.scss';
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

package/lib/components/Excel/ExcelFile.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+declare const meta: Meta<typeof ExcelFile>;
+type Story = StoryObj<typeof ExcelFile>;
+export declare const Default: Story;
+export default meta;

package/lib/components/ExcelFile/ChangeExcelStyles.d.ts

@@ -0,0 +1,14 @@
+import { CellBase } from "./ExcelFile/Excel";
+interface ChangeExcelStylesOptions {
+    sheetName: string;
+    styleType: string;
+    value: string;
+    selectedCell: {
+        row: number;
+        column: number;
+    }[];
+}
+export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
+    [key: string]: Matrix<CellBase>;
+}>>, options: ChangeExcelStylesOptions): void;
+export {};

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -0,0 +1,24 @@
+interface CellStyle {
+    color?: string;
+    backgroundColor?: string;
+    bold?: boolean;
+    italic?: boolean;
+    name?: string;
+    border: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+    alignment: {
+        horizontal?: string;
+        vertical?: string;
+        wrapText?: boolean;
+    };
+}
+interface CellData {
+    style?: CellStyle;
+}
+type ImportExcelStylesData = Array<Array<CellData>>;
+export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
+export {};

package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts

@@ -6,6 +6,8 @@ declare const meta: Meta<typeof LabelEditTextField>;
 type Story = StoryObj<typeof LabelEditTextField>;
 export declare const textField: Story;
 export declare const textFieldWithOutLabel: Story;
+export declare const openTextFieldWithOutLabel: Story;
 export declare const textFieldWithDropdown: Story;
 export declare const textFieldWithHighlight: Story;
+export declare const openLabelEditTextField: Story;
 export default meta;

package/lib/components/MultiSelect/MultiSelect.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Default2: Story;
 export declare const Default3: Story;
 export declare const EmailGroup: Story;
 export declare const Controlled: Story;
+export declare const Labels: Story;
 export default meta;

package/lib/components/Select/Select.stories.d.ts

@@ -10,4 +10,5 @@ export declare const Disable: Story;
 export declare const WithInitialValue: Story;
 export declare const OptionSelection: Story;
 export declare const CustomJSX: Story;
+export declare const updateOptionFromOutside: Story;
 export default meta;

package/lib/components/StatusCard/StatusCard.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Card from './StatusCard';
+import { CardProps } from './types';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<CardProps>;
+export declare const Passed: Story;
+export declare const Failed: Story;
+export declare const Warning: Story;
+export declare const Skipped: Story;
+export declare const Flaky: Story;

package/lib/index.esm.js

@@ -525,6 +525,8 @@ const SvgEyeOpenIcon = (props) => /* @__PURE__ */ React.createElement("svg", { w
 
 const SvgReplaceIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10.2278 16C10.027 16 9.84105 15.8884 9.74435 15.7172C9.64765 15.5386 9.64765 15.3302 9.75179 15.1516L10.5328 13.8492C10.689 13.5812 11.0386 13.4994 11.299 13.6557C11.5667 13.8119 11.6486 14.1543 11.4924 14.4222L11.2915 14.7571C13.3445 14.2734 14.8842 12.4277 14.8842 10.2247C14.8842 9.91955 15.1371 9.6665 15.4421 9.6665C15.7471 9.6665 16 9.91955 16 10.2247C15.9925 13.4101 13.404 16 10.2278 16Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M0.557875 6.32608C0.252903 6.32608 0 6.07304 0 5.7679C0 2.58997 2.58854 0 5.76471 0C5.96554 0 6.1515 0.111637 6.2482 0.282813C6.3449 0.461432 6.3449 0.669821 6.24076 0.848439L5.45973 2.15087C5.30353 2.41135 4.96137 2.50066 4.69359 2.33693C4.43325 2.18064 4.34399 1.83829 4.50763 1.57036L4.70846 1.23545C2.64805 1.71921 1.11575 3.56493 1.11575 5.7679C1.11575 6.07304 0.862846 6.32608 0.557875 6.32608Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M10.079 8.46888V10.657C10.079 12.4804 9.35004 13.2097 7.52765 13.2097H5.34078C3.51839 13.2097 2.78943 12.4804 2.78943 10.657V8.46888C2.78943 6.64548 3.51839 5.91614 5.34078 5.91614H7.52765C9.35004 5.91614 10.079 6.64548 10.079 8.46888Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M10.6524 2.79102H8.46551C6.67287 2.79102 5.94395 3.50549 5.92163 5.26191H7.52828C9.71515 5.26191 10.7268 6.28152 10.7268 8.46216V10.0697C12.4896 10.0474 13.1963 9.31804 13.1963 7.52441V5.34378C13.2037 3.52038 12.4748 2.79102 10.6524 2.79102Z", fill: "currentColor" }));
 
+const SvgHeaderPreset = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M97.5 22.4999H82.5C79.7422 22.4917 77.5083 20.2579 77.5001 17.5V2.5L97.5 22.4999Z", fill: "#4A1353" }), /* @__PURE__ */ React.createElement("path", { d: "M97.5 22.4999V112.5C97.4918 115.258 95.258 117.492 92.5001 117.5H12.4999C9.74203 117.492 7.5082 115.258 7.5 112.5V7.49992C7.5082 4.74203 9.74203 2.5082 12.4999 2.5H77.4998V17.5C77.5083 20.2579 79.7421 22.4917 82.5 22.4999H97.5Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M82.5 100C99.0685 100 112.5 86.5685 112.5 70C112.5 53.4315 99.0685 40 82.5 40C65.9315 40 52.5 53.4315 52.5 70C52.5 86.5685 65.9315 100 82.5 100Z", fill: "#FDFAFF" }), /* @__PURE__ */ React.createElement("path", { d: "M95.0717 58.5713H74.5002C72.6067 58.5713 71.0717 60.1063 71.0717 61.9999V82.5713C71.0717 84.4648 72.6067 85.9999 74.5002 85.9999H95.0717C96.9652 85.9999 98.5002 84.4648 98.5002 82.5713V61.9999C98.5002 60.1063 96.9652 58.5713 95.0717 58.5713Z", fill: "#9D34AE" }), /* @__PURE__ */ React.createElement("path", { d: "M90.5001 54H69.9287C68.0351 54 66.5001 55.535 66.5001 57.4286V78C66.5001 79.8935 68.0351 81.4286 69.9287 81.4286H90.5001C92.3937 81.4286 93.9287 79.8935 93.9287 78V57.4286C93.9287 55.535 92.3937 54 90.5001 54Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M87.0717 66.5715H81.3575V60.8572C81.3575 60.5541 81.237 60.2634 81.0227 60.0491C80.8084 59.8348 80.5177 59.7144 80.2146 59.7144C79.9115 59.7144 79.6208 59.8348 79.4065 60.0491C79.1922 60.2634 79.0717 60.5541 79.0717 60.8572V66.5715H73.3575C73.0544 66.5715 72.7637 66.6919 72.5493 66.9062C72.335 67.1206 72.2146 67.4113 72.2146 67.7144C72.2146 68.0175 72.335 68.3082 72.5493 68.5225C72.7637 68.7368 73.0544 68.8572 73.3575 68.8572H79.0717V74.5715C79.0717 74.8746 79.1922 75.1653 79.4065 75.3796C79.6208 75.5939 79.9115 75.7144 80.2146 75.7144C80.5177 75.7144 80.8084 75.5939 81.0227 75.3796C81.237 75.1653 81.3575 74.8746 81.3575 74.5715V68.8572H87.0717C87.3748 68.8572 87.6655 68.7368 87.8799 68.5225C88.0942 68.3082 88.2146 68.0175 88.2146 67.7144C88.2146 67.4113 88.0942 67.1206 87.8799 66.9062C87.6655 66.6919 87.3748 66.5715 87.0717 66.5715Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M19.9999 15H45V19.9999H19.9999V15Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M19.9999 25H24.9998V29.9999H19.9999V25Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M30 25H34.9999V29.9999H30V25Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M94.9999 112.5C94.9999 113.881 93.8805 115 92.4998 115H12.4999C11.1192 115 9.9998 113.881 9.9998 112.5V7.5C9.9998 6.1193 11.1192 4.99992 12.4999 4.99992H75V17.4998C75 21.642 78.3578 24.9998 82.5 24.9998H87.4999V19.9999H82.5C81.1192 19.9999 79.9999 18.8805 79.9999 17.4998V8.535L94.9999 23.535V32.5001H99.9998V22.5C99.9996 21.837 99.7361 21.2013 99.2674 20.7326L79.2675 0.732422C78.7987 0.263438 78.1628 0 77.5 0H12.4999C8.35777 0 4.99988 3.35789 4.99988 7.5V112.5C4.99988 116.642 8.35777 120 12.4999 120H92.4998C96.6419 120 99.9998 116.642 99.9998 112.5V107.5H94.9999V112.5Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M82.5 37.5C64.5508 37.5 49.9999 52.0507 49.9999 70.0001C49.9999 87.9495 64.5508 102.5 82.5 102.5C100.449 102.5 115 87.9492 115 69.9998C114.979 52.0594 100.441 37.5206 82.5 37.5ZM82.5 97.5C67.3122 97.5 55 85.1878 55 70.0001C55 54.8123 67.3122 42.4999 82.5 42.4999C97.6877 42.4999 110 54.8121 110 69.9998C109.982 85.1803 97.6804 97.4822 82.5 97.5Z", fill: "#71347B" }));
+
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['delete_info'] = SvgDeleteInfo;
@@ -722,6 +724,7 @@ Components['run_manual_testcase'] = SvgRunManualTestcaseIcon;
 Components['run_automation_scripts'] = SvgRunAutomationScriptsIcon;
 Components['eye_open_icon'] = SvgEyeOpenIcon;
 Components['replace_icon'] = SvgReplaceIcon;
+Components['header_preset'] = SvgHeaderPreset;
 
 var css_248z$17 = ".ff-icon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-dark {\n  background-color: var(--brand-color);\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
 styleInject(css_248z$17);
@@ -899,7 +902,7 @@ function useEscapeKey(key) {
   };
 }
 
-var css_248z$14 = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ebff;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ebff;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n}";
+var css_248z$14 = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ebff;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ebff;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n}";
 styleInject(css_248z$14);
 
 const ThemeContext = /*#__PURE__*/createContext$1(undefined);
@@ -7418,7 +7421,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -7430,7 +7433,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
+        if (!props.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -7446,7 +7449,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7510,7 +7513,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        if (!props.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -7646,7 +7649,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
+    const _getDirty = (name, data) => !props.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -7962,7 +7965,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -7978,7 +7981,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -7988,7 +7991,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -8072,12 +8075,6 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
-        if (_options.disabled) {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
-            }
-            return;
-        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -8256,9 +8253,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -8459,6 +8454,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React__default.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -17771,7 +17771,7 @@ const IconButton = ({
   });
 };
 
-var css_248z$y = ".ff-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--modal-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n}\n\n.ff-modal-container {\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.ff-modal-content {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-width: 100%;\n  padding: 8px;\n}\n.ff-modal-content .ff-modal-header {\n  height: 32px;\n  width: 100%;\n}\n\n.modal-bottom-border {\n  border-bottom-left-radius: 12px;\n  border-bottom-right-radius: 12px;\n}\n\n.modal-top-border {\n  border-top-left-radius: 12px;\n  border-top-right-radius: 12px;\n}\n\n.ff-modal-footer {\n  background-color: var(--expandable-menu-option-bg);\n  max-width: 100%;\n  width: 100%;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n}";
+var css_248z$y = ".ff-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--modal-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n}\n\n.ff-modal-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ff-modal-content {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-width: 100%;\n  padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n  height: 32px;\n  width: 100%;\n}\n\n.modal-bottom-border {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n  background-color: var(--expandable-menu-option-bg);\n  max-width: 100%;\n  width: 100%;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 16px;\n}";
 styleInject(css_248z$y);
 
 const Modal = ({
@@ -17827,7 +17827,7 @@ const Modal = ({
       style: {
         boxShadow: boxShadow,
         border: border,
-        borderRadius: '12px',
+        borderRadius: '8px',
         background: background
       },
       className: "ff-modal-container",
@@ -22747,7 +22747,7 @@ const VariableInput = ({
   });
 };
 
-var css_248z$w = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  background-color: var(--ff-all-projects-default-color);\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  background-color: var(--brand-color);\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n  width: 99%;\n  margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n  height: 30px;\n  width: inherit;\n  border-radius: 4px;\n  border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n  padding-left: 28px;\n  font-size: 8px;\n  line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n  position: absolute;\n  top: 11px;\n  left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n  max-height: 256px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n  background: var(--primary-icon-color);\n  border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n  border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n  fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+var css_248z$w = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  background-color: var(--ff-all-projects-default-color);\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n  width: 99%;\n  margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n  height: 30px;\n  width: inherit;\n  border-radius: 4px;\n  border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n  padding-left: 28px;\n  font-size: 8px;\n  line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n  position: absolute;\n  top: 11px;\n  left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n  max-height: 256px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n  background: var(--primary-icon-color);\n  border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n  border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n  fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
 styleInject(css_248z$w);
 
 const AllProjectsDropdown = ({
@@ -23039,7 +23039,7 @@ const PieChart = ({
   });
 };
 
-var css_248z$u = ".ff-app-header {\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 5px;\n  z-index: 1000;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  background-color: var(--brand-color);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 10%;\n  width: 90%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header .ff-app-header-left-content,\n.ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+var css_248z$u = ".ff-app-header {\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 5px;\n  z-index: 1000;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 10%;\n  width: 90%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header .ff-app-header-left-content,\n.ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
 styleInject(css_248z$u);
 
 const AppHeader = ({