/**
 * Do not edit directly
 */

[data-theme="talabat-light-b2b"] {
  --cp-text-color-primary: #141415; /* Used for the primary headers and long text */
  --cp-text-color-secondary: #343437; /* Used for displaying less prominant copy */
  --cp-text-color-tertiary: #6C6D73; /* Used for displaying short text on disabled elements */
  --cp-text-color-disabled: rgba(20, 20, 21, 0.40); /* Used for displaying short text on disabled elements */
  --cp-text-color-inverse: #FFFFFF; /* For texts over opposite-contrast backgrounds, such as dark backgrounds */
  --cp-text-color-inverse-disabled: rgba(255, 255, 255, 0.48); /* For disabled texts over opposite-contrast backgrounds, such as dark backgrounds */
  --cp-text-color-branded: #D64C00; /* Theme accent color which is used for enabled and selected states for text  */
  --cp-text-color-onbranded: #FFFFFF; /* Used for texts on surfaces using the theme accent color */
  --cp-text-color-danger: #D62D0B; /* Used for short labels to indicate danger or error */
  --cp-text-color-ondanger: #FFFFFF; /* Used for the texts on surfaces which indicate danger or error */
  --cp-text-color-success: #047538; /* Used for short labels to indicate a postive outcome or active status */
  --cp-text-color-onsuccess: #FFFFFF; /* Used for the texts on surfaces which indicate success */
  --cp-text-color-info: #6635B6; /* Used for short labels to indicate an informative message or status */
  --cp-text-color-oninfo: #FFFFFF; /* Used for the texts on surfaces which indicate an information */
  --cp-text-color-warning: #BE7F00; /* Used for short texts to indicate warning */
  --cp-text-color-onwarning: #141415; /* Used for the texts on surfaces which indicate warning */
  --cp-text-color-onneutral: #FFFFFF; /* Used for the texts on surfaces which indicate a neutral state */
  --cp-action-color-branded-primary-enabled: #F55905; /* Theme accent color which is used for enabled, focused and selected states for actions */
  --cp-action-color-branded-primary-hover: #FF7429; /* Used for hover states of primary actions */
  --cp-action-color-branded-primary-pressed: #D64C00; /* Used for pressed states of primary actions */
  --cp-action-color-branded-primary-disabled: rgba(20, 20, 21, 0.12); /* Used for disabled states of primary actions */
  --cp-action-color-branded-secondary-enabled: #F55905; /* Theme accent color which is used for secondary enabled, focused and selected states for actions */
  --cp-action-color-branded-secondary-hover: #F55905; /* Used for hover states of secondary actions */
  --cp-action-color-branded-secondary-pressed: #F55905; /* Used for pressed states of secondary actions */
  --cp-action-color-branded-secondary-disabled: #b9bac1; /* Used for disabled states of secondary actions */
  --cp-action-color-branded-tertiary-enabled: rgba(255, 255, 255, 0.01); /* Used for the fill color of enabled secondary action buttons */
  --cp-action-color-branded-tertiary-hover: rgba(20, 20, 21, 0.04); /* Used for the fill color of hovered secondary action buttons */
  --cp-action-color-branded-tertiary-pressed: rgba(20, 20, 21, 0.08); /* Used for the fill color of pressed secondary action buttons */
  --cp-action-color-branded-tertiary-disabled: rgba(255, 255, 255, 0.01); /* Used for the fill color of disabled secondary action buttons */
  --cp-action-color-danger-primary-enabled: #D62D0B; /* Used for enabled, focused and selected states of danger actions */
  --cp-action-color-danger-primary-hover: #E54B2C; /* Used for hover states of danger actions */
  --cp-action-color-danger-primary-pressed: #BF280A; /* Used for pressed states of danger actions */
  --cp-action-color-danger-primary-disabled: rgba(20, 20, 21, 0.12); /* Used for disabled states of danger actions */
  --cp-action-color-danger-secondary-enabled: #D62D0B; /* Theme accent color which is used for secondary enabled, focused and selected states for danger actions */
  --cp-action-color-danger-secondary-hover: #D62D0B; /* Used for hover states of secondary danger actions */
  --cp-action-color-danger-secondary-pressed: #D62D0B; /* Used for pressed states of secondary danger actions */
  --cp-action-color-danger-secondary-disabled: #b9bac1; /* Used for disabled states of secondary danger actions */
  --cp-action-color-tertiary-enabled: rgba(255, 255, 255, 0.01); /* Used for enabled states of tertiary actions such as icon buttons, secondary and tertiary buttons */
  --cp-action-color-tertiary-hover: rgba(20, 20, 21, 0.04); /* Used for hover states of tertiary actions such as icon buttons */
  --cp-action-color-tertiary-pressed: rgba(20, 20, 21, 0.08); /* Used for pressed states of tertiary actions such as icon buttons */
  --cp-action-color-tertiary-disabled: rgba(255, 255, 255, 0.01); /* Used for disabled states of tertiary actions such as icon buttons, secondary and tertiary buttons */
  --cp-action-color-visited-enabled: #6635B6; /* Used for visited states of action items such as visited links */
  --cp-action-color-visited-hover: #7C53C1; /* Used for hover states of visited action items to signify interactivity */
  --cp-action-color-secondary-enabled: #93949D; /* Alternate color which is used for all states of secondary actions */
  --cp-action-color-secondary-hover: #93949D; /* Alternate color which is used for hover states of secondary actions */
  --cp-action-color-secondary-pressed: #93949D; /* Alternate color which is used for pressed states of secondary actions */
  --cp-action-color-secondary-disabled: #b9bac1; /* Color style which is used for disabled states of secondary actions */
  --cp-action-color-success-primary-enabled: #047538; /* Color token used for enabled states of success indicating primary actions */
  --cp-action-color-success-primary-hover: #048A42; /* Color token used for hover states of success indicating primary actions */
  --cp-action-color-success-primary-pressed: #03582A; /* Color token used for pressed states of success indicating primary actions */
  --cp-action-color-success-primary-disabled: rgba(20, 20, 21, 0.12); /* Used for disabled states of primary actions */
  --cp-action-color-success-secondary-enabled: #047538; /* Theme accent color which is used for secondary enabled, focused and selected states for success actions */
  --cp-action-color-success-secondary-hover: #047538; /* Used for hover states of secondary success actions */
  --cp-action-color-success-secondary-pressed: #047538; /* Used for pressed states of secondary success actions */
  --cp-action-color-success-secondary-disabled: #b9bac1; /* Used for disabled states of secondary success actions */
  --cp-action-color-info-enabled: #6635B6; /* Color token used for enabled states of information indicating actions */
  --cp-action-color-info-hover: #7C53C1; /* Color token used for hover states of information indicating actions */
  --cp-action-color-info-pressed: #522B92; /* Color token used for pressed states of information indicating actions */
  --cp-action-color-info-disabled: rgba(20, 20, 21, 0.12); /* Used for disabled states of primary actions */
  --cp-action-color-inverse-primary-enabled: #FFFFFF; /* Color token used on the enabled states of inverted action buttons */
  --cp-action-color-inverse-primary-hover: #E9EAEC; /* Color token used on the hover states of inverted action buttons */
  --cp-action-color-inverse-primary-pressed: #CECED4; /* Color token used on the pressed states of inverted action buttons */
  --cp-action-color-inverse-primary-disabled: rgba(255, 255, 255, 0.12); /* Color token used on the disabled states of inverted action buttons */
  --cp-action-color-inverse-tertiary-enabled: rgba(20, 20, 21, 0.01); /* Color token used on the enabled states of inverted action secondary buttons */
  --cp-action-color-inverse-tertiary-hover: rgba(255, 255, 255, 0.04); /* Color token used on the hover states of inverted action secondary buttons */
  --cp-action-color-inverse-tertiary-pressed: rgba(255, 255, 255, 0.08); /* Color token used on the pressed states of inverted action secondary buttons */
  --cp-action-color-inverse-tertiary-disabled: rgba(255, 255, 255, 0.01); /* Color token used on the disabled states of inverted action secondary buttons */
  --cp-action-color-inverse-secondary-enabled: rgba(255, 255, 255, 0.40); /* Color token used on the enabled states of inverted action secondary buttons */
  --cp-action-color-inverse-secondary-hover: rgba(255, 255, 255, 0.48); /* Color token used on the hover states of inverted action secondary buttons */
  --cp-action-color-inverse-secondary-pressed: rgba(255, 255, 255, 0.56); /* Color token used on the pressed states of inverted action secondary buttons */
  --cp-action-color-inverse-secondary-disabled: #6C6D73; /* Color token used on the disabled states of inverted action secondary buttons */
  --cp-action-color-accent-primary-branded: #FFFFFF; /* Accent color used for branded primary button labels and icons. */
  --cp-action-color-accent-primary-danger: #FFFFFF; /* Accent color used for error primary button labels and icons. */
  --cp-action-color-accent-primary-success: #FFFFFF; /* Accent color used for success primary button labels and icons. */
  --cp-action-color-accent-primary-disabled: rgba(20, 20, 21, 0.40); /* Accent color used for disabled primary button labels and icons. */
  --cp-action-color-accent-secondary-branded: #D64C00; /* Accent color used for branded secondary button labels and icons. */
  --cp-action-color-accent-secondary-danger: #D62D0B; /* Accent color used for error secondary button labels and icons. */
  --cp-action-color-accent-secondary-success: #047538; /* Accent color used for success secondary button labels and icons. */
  --cp-action-color-accent-secondary-disabled: rgba(20, 20, 21, 0.40); /* Accent color used for disabled secondary button labels and icons. */
  --cp-action-color-accent-tertiary-branded: #D64C00; /* Accent color used for branded tertiary button labels and icons. */
  --cp-action-color-accent-tertiary-danger: #D62D0B; /* Accent color used for error tertiary button labels and icons. */
  --cp-action-color-accent-tertiary-success: #047538; /* Accent color used for success tertiary button labels and icons. */
  --cp-action-color-accent-tertiary-disabled: rgba(20, 20, 21, 0.40); /* Accent color used for disabled tertiary button labels and icons. */
  --cp-switch-color-active-disabled: #FFD1B8; /* This token is specifically for the active, disabled state of the switch component */
  --cp-switch-color-active-hover: #FF7429; /* This token is specifically for the active, hover state of the switch component */
  --cp-switch-color-active-enabled: #F55905; /* This token is specifically for the active, enabled state of the switch component */
  --cp-switch-color-active-accent: #FFFFFF; /* This token is specifically for the active, disabled state of the switch component */
  --cp-switch-color-active-accent-low: #F4F5F6; /* This token is specifically for the active, disabled state of the switch component */
  --cp-switch-color-inactive-enabled: #6C6D73; /* This token is specifically for the inactive, enabled state of the switch component */
  --cp-switch-color-inactive-hover: #93949D; /* This token is specifically for the inactive, hover state of the switch component */
  --cp-switch-color-inactive-disabled: #b9bac1; /* This token is specifically for the inactive, disabled state of the switch component */
  --cp-switch-color-inactive-accent: #FFFFFF; /* This token is specifically for the inactive, enabled state of the switch component */
  --cp-switch-color-inactive-accent-low: #F4F5F6; /* This token is specifically for the inactive, enabled state of the switch component */
  --cp-base-color-flat: #FFFFFF; /* The base color for default page backgrounds and card surface of the light modes */
  --cp-base-color-lowest: #F4F5F6; /* The base color used to slightly seperate a section or element */
  --cp-base-color-low: #E9EAEC; /* The base color used for differentiating a surface from the flat page level */
  --cp-base-color-normal: #CECED4; /* The base color used for achieving a strong contrast between the flat page level */
  --cp-base-color-high: #6C6D73; /* The base color for indicating a state change in the surface such as hovered elements */
  --cp-base-color-highest: #1E1E20; /* The base color used in the background of elements like a tooltip to make them pop */
  --cp-base-color-overlay: rgba(20, 20, 21, 0.3); /* This color is used for transparent background of overlay components such as dialogs and side sheets */
  --cp-base-color-branded: #F55905; /* Platforms background color for full-screen messages */
  --cp-base-color-branded-low: rgba(245, 89, 5, 0.08); /* Platforms light background color for subtly branded backgrounds */
  --cp-base-color-lightest: hsl(0 0% 0% / 0.02); /* Lightest grey for page backgrounds */
  --cp-base-gradient-fadeout: rgba(255, 255, 255, 1); /* The gradient color used to communicate a fade out effect */
  --cp-base-gradient-fadein: rgba(255, 255, 255, 0.0); /* The gradient color used to communicate a fade in effect */
  --cp-base-elevation-low: 0 2px 8px 0 rgba(20, 20, 21, 0.08); /* Default elevation for interactive containers */
  --cp-base-elevation-high: 0 2px 16px 0 rgba(20, 20, 21, 0.12); /* Elevation for floating elements */
  --cp-base-elevation-highest: 0 4px 24px 0 rgba(20, 20, 21, 0.16); /* Elevation for overlay elements */
  --cp-base-focus-default-border-width: 1px;
  --cp-base-focus-default-border-color: #F55905;
  --cp-base-focus-default-box-shadow: 0 0 0 4px rgba(245, 89, 5, 0.4);
  --cp-base-focus-default-inverse-border-width: 1px;
  --cp-base-focus-default-inverse-border-color: rgba(255, 255, 255, 0.32);
  --cp-base-focus-default-inverse-box-shadow: 0 0 0 4px rgba(245, 89, 5, 0.4);
  --cp-base-focus-danger-border-width: 1px;
  --cp-base-focus-danger-border-color: #D62D0B;
  --cp-base-focus-danger-box-shadow: 0 0 0 4px rgba(214, 45, 11, 0.4);
  --cp-base-focus-danger-inverse-border-width: 1px;
  --cp-base-focus-danger-inverse-border-color: rgba(255, 255, 255, 0.32);
  --cp-base-focus-danger-inverse-box-shadow: 0 0 0 4px rgba(214, 45, 11, 0.4);
  --cp-icon-color-primary: #141415; /* Used for displaying prominent icons */
  --cp-icon-color-secondary: #343437; /* Used for displaying less prominent or supportive icons */
  --cp-icon-color-tertiary: #6C6D73; /* Used for displaying disabled icons */
  --cp-icon-color-disabled: rgba(20, 20, 21, 0.40); /* Used for displaying disabled icons */
  --cp-icon-color-ondisabled: #FFFFFF; /* Used for displaying disabled icons */
  --cp-icon-color-inverse: #FFFFFF; /* For icons over opposite-contrast backgrounds, such as over dark backgrounds */
  --cp-icon-color-inverse-disabled: rgba(255, 255, 255, 0.40); /* For disabled icons over opposite-contrast backgrounds, such as over dark backgrounds */
  --cp-icon-color-branded: #D64C00; /* Theme accent color which is used for enabled and selected states of icons  */
  --cp-icon-color-onbranded: #FFFFFF; /* Used for icons on surfaces using the theme accent color */
  --cp-icon-color-danger: #D62D0B; /* Used for icons which indicate danger or error */
  --cp-icon-color-ondanger: #FFFFFF; /* Used for the icons on surfaces which indicate danger or error */
  --cp-icon-color-success: #047538; /* Used for icons which indicate a postive outcome or active status */
  --cp-icon-color-onsuccess: #FFFFFF; /* Used for the icons on surfaces which indicate success */
  --cp-icon-color-info: #6635B6; /* Used for the icons which indicate informative status */
  --cp-icon-color-oninfo: #FFFFFF; /* Used for the icons on surfaces which indicate an informative status */
  --cp-icon-color-warning: #BE7F00; /* Used for the icons that indicate warning */
  --cp-icon-color-onwarning: #141415; /* Used for the icons on surfaces which indicate warning */
  --cp-icon-color-onneutral: #FFFFFF; /* Used for the icons on surfaces which indicate a neutral state */
  --cp-icon-color-seen: #1789F2; /* Used for the icons on surfaces which indicate a neutral state */
  --cp-feedback-color-branded-high: #F55905; /* Theme accent color which is used for more prominent generic feedback */
  --cp-feedback-color-branded-low: #FFF2EB; /* Default background color for notification components */
  --cp-feedback-color-branded-onbranded-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-branded-accent-low: #F55905; /* Theme accent color which is used for more prominent generic feedback */
  --cp-feedback-color-danger-high: #D62D0B; /* A prominent tone used for showing danger or error feedback  */
  --cp-feedback-color-danger-low: #FCEBE8; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-danger-ondanger-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-danger-accent-low: #BF280A; /* A prominent tone used for showing danger or error feedback  */
  --cp-feedback-color-success-high: #047538; /* A prominent tone used for showing success or positive feedback */
  --cp-feedback-color-success-low: #E5F5EC; /* A subtle tone used for showing success or positive feedback  */
  --cp-feedback-color-success-onsuccess-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-success-accent-low: #047538; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-info-high: #6635B6; /* A prominent tone used for showing informative feedback  */
  --cp-feedback-color-info-low: #F7F5FC; /* A subtle tone used for showing informative feedback */
  --cp-feedback-color-info-oninfo-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-info-accent-low: #6635B6; /* A prominent tone used for showing informative feedback  */
  --cp-feedback-color-warning-high: #FFC400; /* A prominent tone used for showing warning feedback */
  --cp-feedback-color-warning-low: #FFF8DF; /* A subtle tone used for showing warning feedback */
  --cp-feedback-color-warning-onwarning-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-warning-accent-low: #8F5D00; /* A prominent tone used for showing warning feedback */
  --cp-feedback-color-disabled-high: #343437; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-disabled-low: rgba(20, 20, 21, 0.12); /* Default background color for neutral messages */
  --cp-feedback-color-disabled-ondisabled-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-disabled-accent-low: rgba(20, 20, 21, 0.40); /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-neutral-high: #343437; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-neutral-low: #F4F5F6; /* Default background color for neutral messages */
  --cp-feedback-color-neutral-ondisabled-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-neutral-accent-low: #343437; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-inverse-high: #343437; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-inverse-low: #FFFFFF; /* Default background color for neutral messages */
  --cp-feedback-color-inverse-ondisabled-low: #141415; /* A subtle tone used for showing danger or error feedback  */
  --cp-feedback-color-inverse-accent-low: #343437; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-subtle-high: #141415; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-subtle-accent: #141415; /* For 'Item Unavailable' and other inactive status indicators */
  --cp-feedback-color-subtle-low: #E9EAEC; /* Default background color for neutral messages */
  --cp-border-color-normal: #E9EAEC; /* Used for less prominent borders */
  --cp-border-color-high: #CECED4; /* Used for showing strong and more contrasting borders */
  --cp-border-color-inverse: rgba(255, 255, 255, 0.32); /* Used for inverse prominent borders */
  --cp-illustration-color-primary: #F55905; /* Theme accent color which is used as a primary color in illustrations */
  --cp-illustration-color-secondary: #434347; /* Used for secondary or supportive colors of illustrations */
  --cp-illustration-color-tertiary: #FFF2EB; /* Used for tertiary or surface colors of illustrations such as an illustration with a color fill background */
  --cp-illustration-color-danger: #D62D0B; /* Used instead of a theme accent color when a danger or error state has to be indicated */
  --cp-motion-color-primary-branded: #F55905; /* Theme accent color used for highlighting the most important shape in the motion graphic */
  --cp-motion-color-primary-onbranded: #FFFFFF; /* The color tone used to achieve an inverted look */
  --cp-loading-color-secondary-branded: rgba(20, 20, 21, 0.16); /* The background surface of loading spinner which adapts to various surfaces */
  --cp-loading-color-secondary-onbranded: rgba(255, 255, 255, 0.16); /* The background surface of loading spinner which adapts to various surfaces */
  --cp-loading-color-primary-branded: #F55905;
  --cp-loading-color-primary-onbranded: #FFFFFF;
  --cp-focus-enabled: 0 0 0 4px rgba(245, 89, 5, 0.4); /* This token is a building block and should not be used as standalone. In order to indicate the focused elements, please check the focus tokens under composition tokens group */
  --cp-focus-default: 0 0 0 5px rgba(245, 89, 5, 0.3); /* Default focus style for interactive containers */
  --cp-focus-default-inverse: 0 0 0 5px rgba(255, 209, 184, 0.4); /* Inverse focus style for interactive containers */
  --cp-focus-danger: 0 0 0 4px rgba(214, 45, 11, 0.4); /* This token is a building block and should not be used as standalone. In order to indicate the focused elements, please check the focus tokens under composition tokens group */
  --cp-focus-outside-default: 0 0 0 3px #FFFFFF, 0 0 0 5px #000000;
  --cp-focus-center-default: 0 0 0 2px #000000, 0 0 0 4px #FFFFFF;
  --cp-focus-center-danger: 0 0 0 2px #000000, 0 0 0 4px #FFFFFF;
  --cp-focus-outside-inverse: 0 0 0 3px #000000, 0 0 0 5px #FFFFFF;
  --cp-focus-inside-default: inset 0 0 0 2px #000000, inset 0 0 0 4px #FFFFFF;
  --cp-control-color-branded-primary-enabled: #93949D; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-control-color-branded-primary-hover: #7F8088; /* Hover state for non-selected form controls */
  --cp-control-color-branded-primary-selected: #F55905; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-control-color-branded-primary-selected-hover: #FF9C66; /* For hover states of selected form controls  */
  --cp-control-color-branded-primary-disabled: #b9bac1; /* Default color for disabled form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-control-color-branded-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-control-color-branded-secondary-hover: rgba(20, 20, 21, 0.04); /* Used for hover states of secondary controls such as hovered list surfaces */
  --cp-control-color-branded-secondary-selected: rgba(245, 89, 5, 0.08); /* Used for pressed or selected states of secondary controls */
  --cp-control-color-branded-secondary-selected-hover: rgba(245, 89, 5, 0.12); /* Used for hover states of selected secondary controls */
  --cp-control-color-branded-secondary-disabled: rgba(20, 20, 21, 0.04); /* Used for disabled states of secondary controls */
  --cp-control-color-branded-secondary-auto-fill: rgba(255, 196, 0, 0.16); /* Used for auto-filled states of the form fields */
  --cp-control-color-branded-tertiary-selected: #F55905; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-control-color-branded-tertiary-selected-hover: #FF9C66; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-control-color-branded-tertiary-disabled: #b9bac1; /* Default color for disabled form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-control-color-danger-primary-enabled: #D62D0B; /* Used as a border style on the enabled states of the controls to indicate an error */
  --cp-control-color-danger-primary-hover: #E54B2C; /* Used as a border style on the hover states of the controls to indicate an error */
  --cp-control-color-danger-primary-selected: #D62D0B; /* Used as a border style on the enabled states of the controls to indicate an error */
  --cp-control-color-danger-primary-selected-hover: #E54B2C; /* Used as a border style on the hover states of the controls to indicate an error */
  --cp-control-color-danger-primary-pressed: #BF280A; /* Used as a border style on the pressed states of the controls to indicate an error */
  --cp-control-color-danger-tertiary-enabled: #D62D0B; /* Used as a border style on the enabled states of the controls to indicate an error */
  --cp-control-color-danger-tertiary-hover: #E54B2C; /* Used as a border style on the hover states of the controls to indicate an error */
  --cp-control-color-danger-tertiary-selected: #D62D0B; /* Used as a border style on the enabled states of the controls to indicate an error */
  --cp-control-color-danger-tertiary-selected-hover: #E54B2C; /* Used as a border style on the hover states of the controls to indicate an error */
  --cp-control-color-danger-tertiary-pressed: #BF280A; /* Used as a border style on the pressed states of the controls to indicate an error */
  --cp-control-color-danger-secondary-enabled: #D62D0B; /* Used as a border style on the enabled states of the controls to indicate an error */
  --cp-control-color-danger-secondary-hover: #E54B2C; /* Used as a border style on the hover states of the controls to indicate an error */
  --cp-control-color-inverse-primary-selected: #FFFFFF;
  --cp-control-color-inverse-primary-selected-hover: #FFFFFF;
  --cp-control-color-inverse-primary-disabled: #FFFFFF;
  --cp-control-color-inverse-secondary-selected: #FFFFFF;
  --cp-control-color-inverse-secondary-selected-hover: #FFFFFF;
  --cp-control-color-inverse-secondary-disabled: #FFFFFF;
  --cp-control-color-inverse-tertiary-selected: #FFFFFF;
  --cp-control-color-inverse-tertiary-selected-hover: #FFFFFF;
  --cp-control-color-inverse-tertiary-disabled: #FFFFFF;
  --cp-skeleton-color-animation: linear-gradient(-90deg, #ffffff00 0%, #ffffffd6 50%, #ffffff00 100%); /* Used for animation layer of the skeletons */
  --cp-skeleton-color-static: rgba(20, 20, 21, 0.08); /* Used for static layer of the skeletons */
  --cp-chart-color-branded-highest: #F55905; /* Theme branded color used as the highest color for charts */
  --cp-chart-color-branded-high: #FF9C66; /* Theme branded color used as the high color for charts */
  --cp-chart-color-branded-medium: #FFD1B8; /* Theme branded color used as the medium color for charts */
  --cp-chart-color-branded-low: #FFE5D6; /* Theme branded color used as the low color for charts */
  --cp-chart-color-branded-lowest: #FFF2EB; /* Theme branded color used as the lowest color for charts */
  --cp-chart-color-danger-highest: #D62D0B; /* Theme danger color used as the highest color for charts */
  --cp-chart-color-danger-high: #EC6B51; /* Theme danger color used as the high color for charts */
  --cp-chart-color-danger-medium: #F4B7AB; /* Theme danger color used as the medium color for charts */
  --cp-chart-color-danger-low: #F9D9D2; /* Theme danger color used as the low color for charts */
  --cp-chart-color-danger-lowest: #FCEBE8; /* Theme danger color used as the lowest color for charts */
  --cp-chart-color-success-highest: #048A42; /* Theme success color used as the highest color for charts */
  --cp-chart-color-success-high: #31B46E; /* Theme success color used as the high color for charts */
  --cp-chart-color-success-medium: #95D5B2; /* Theme success color used as the medium color for charts */
  --cp-chart-color-success-low: #BDE5D0; /* Theme success color used as the low color for charts */
  --cp-chart-color-success-lowest: #E5F5EC; /* Theme success color used as the lowest color for charts */
  --cp-chart-color-info-highest: #6635B6; /* Theme info color used as the highest color for charts */
  --cp-chart-color-info-high: #9C7CCF; /* Theme info color used as the high color for charts */
  --cp-chart-color-info-medium: #CBBAE8; /* Theme info color used as the medium color for charts */
  --cp-chart-color-info-low: #E1D6F0; /* Theme info color used as the low color for charts */
  --cp-chart-color-info-lowest: #F7F5FC; /* Theme info color used as the lowest color for charts */
  --cp-chart-color-warning-highest: #FFC400; /* Theme warning color used as the highest color for charts */
  --cp-chart-color-warning-high: #FFD95C; /* Theme warning color used as the high color for charts */
  --cp-chart-color-warning-medium: #FFEAA3; /* Theme warning color used as the medium color for charts */
  --cp-chart-color-warning-low: #FFF1C2; /* Theme warning color used as the low color for charts */
  --cp-chart-color-warning-lowest: #FFF8DF; /* Theme warning color used as the lowest color for charts */
  --cp-chart-color-neutral-highest: #56565C; /* Theme neutral color used as the highest color for charts */
  --cp-chart-color-neutral-high: #7F8088; /* Theme neutral color used as the high color for charts */
  --cp-chart-color-neutral-medium: #b9bac1; /* Theme neutral color used as the medium color for charts */
  --cp-chart-color-neutral-low: #CECED4; /* Theme neutral color used as the low color for charts */
  --cp-chart-color-neutral-lowest: #E9EAEC; /* Theme neutral color used as the lowest color for charts */
  --cp-form-color-branded-primary-enabled: #93949D; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-form-color-branded-primary-hover: #7F8088; /* Hover state for non-selected form controls */
  --cp-form-color-branded-primary-focused: #93949D; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-branded-primary-focused-alternate: rgba(255, 255, 255, 0); /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-branded-primary-disabled: #b9bac1; /* Default color for disabled form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-form-color-branded-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-branded-secondary-hover: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-branded-secondary-hover-alternate: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-branded-secondary-disabled: rgba(20, 20, 21, 0.04); /* Used for disabled states of secondary controls */
  --cp-form-color-branded-secondary-auto-fill: rgba(255, 196, 0, 0.16); /* Used for auto-filled states of the form fields */
  --cp-form-color-danger-primary-enabled: #D62D0B; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-form-color-danger-primary-hover: #E54B2C; /* Hover state for non-selected form controls */
  --cp-form-color-danger-primary-focused: #D62D0B; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-danger-primary-focused-alternate: rgba(255, 255, 255, 0); /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-danger-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-danger-secondary-hover: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-danger-secondary-hover-alternate: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-success-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-success-secondary-hover: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-success-secondary-hover-alternate: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-form-color-success-primary-enabled: #93949D; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-form-color-success-primary-hover: #7F8088; /* Hover state for non-selected form controls */
  --cp-form-color-success-primary-focused: #93949D; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-success-primary-focused-alternate: rgba(255, 255, 255, 0); /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-accent-primary: #141415; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-form-color-accent-secondary: #343437; /* Hover state for non-selected form controls */
  --cp-form-color-accent-tertiary: #6C6D73; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-accent-tertiary-alternate: #6C6D73; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-form-color-accent-disabled: rgba(20, 20, 21, 0.40); /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-chip-color-branded-primary-enabled: #93949D; /* Used for enabled states of chip borders */
  --cp-chip-color-branded-primary-hover: #93949D; /* Used for hover states of chip borders */
  --cp-chip-color-branded-primary-pressed: #93949D; /* Used for pressed states of chip borders */
  --cp-chip-color-branded-primary-selected: #F55905; /* Used for selected states of chip borders */
  --cp-chip-color-branded-primary-selected-hover: #FF9C66; /* Used for selected hover states of chip borders */
  --cp-chip-color-branded-primary-disabled: #b9bac1; /* Used for disabled states of chip borders */
  --cp-chip-color-branded-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used for enabled states of chip fills */
  --cp-chip-color-branded-secondary-hover: rgba(20, 20, 21, 0.04); /* Used for hover states of chip fills */
  --cp-chip-color-branded-secondary-pressed: rgba(20, 20, 21, 0.08); /* Used for pressed states of chip fills */
  --cp-chip-color-branded-secondary-selected: rgba(245, 89, 5, 0.08); /* Used for selected states of chip fills */
  --cp-chip-color-branded-secondary-selected-alternate: rgba(20, 20, 21, 0.04); /* Used for selected and selected hover states close interaction backgrounds. */
  --cp-chip-color-branded-secondary-selected-hover: rgba(20, 20, 21, 0.04); /* Used for selected hover states of chip fills */
  --cp-chip-color-branded-secondary-disabled: rgba(255, 255, 255, 0.01); /* Used for disabled states of chip fills */
  --cp-chip-color-branded-tertiary-enabled: #141415; /* Used for enabled states of chip labels and icons */
  --cp-chip-color-branded-tertiary-hover: #141415; /* Used for hover states of chip labels and icons */
  --cp-chip-color-branded-tertiary-pressed: #141415; /* Used for pressed states of chip labels and icons */
  --cp-chip-color-branded-tertiary-selected: #D64C00; /* Used for selected states of chip labels and icons */
  --cp-chip-color-branded-tertiary-selected-alternate: #141415; /* Only used for selected states of chip close icons */
  --cp-chip-color-branded-tertiary-selected-hover: #F55905; /* Used for selected hover states of chip labels and icons */
  --cp-chip-color-branded-tertiary-disabled: rgba(20, 20, 21, 0.40); /* Used for disabled states of chip labels and icons */
  --cp-tabs-color-active-high: #D64C00; /* Tabs text color */
  --cp-tabs-color-active-low: #D64C00; /* Tabs divider color */
  --cp-tabs-color-active-base: #FFFFFF; /* tabs background color */
  --cp-tabs-color-inactive-high: #141415; /* Tabs text */
  --cp-tabs-color-inactive-hover: rgba(20, 20, 21, 0.04); /* This token is specifically for the inactive, hover state of the switch component */
  --cp-tabs-color-inactive-disabled: rgba(20, 20, 21, 0.32); /* Disabled text */
  --cp-quantity-selector-color-primary: #93949D; /* Used for quantity selector borders */
  --cp-quantity-selector-color-secondary: rgba(255, 255, 255, 0.01); /* Used for quantity selector background fills */
  --cp-quantity-selector-color-tertiary: #141415; /* Used for quantity selector icons */
  --cp-list-color-high: #141415; /* Tabs text */
  --cp-list-color-low: #343437; /* Tabs text */
  --cp-list-color-selected-accent: #F55905; /* Tabs text color */
  --cp-list-color-selected: rgba(245, 89, 5, 0.04); /* Selected background color */
  --cp-list-color-enabled: rgba(255, 255, 255, 0.01); /* tabs background color */
  --cp-list-color-hover: rgba(20, 20, 21, 0.04); /* This token is specifically for the inactive, hover state of the switch component */
  --cp-list-color-disabled-accent: rgba(20, 20, 21, 0.40); /* List disabled text color */
  --cp-card-color-enabled: #E9EAEC; /* card enabled border */
  --cp-card-color-selected: #F55905; /* card selected border */
  --cp-card-color-selected-hover: #FF9C66; /* card selected hover border */
  --cp-card-color-selected-high: rgba(245, 89, 5, 0.02); /* Used as fill for selected and selected hover's outlined and elevated variants of card */
  --cp-card-color-selected-low: rgba(245, 89, 5, 0.08); /* Used as fill in  selected and selected hovers' fill variant of card */
  --cp-search-color-branded-primary-enabled: #93949D; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-search-color-branded-primary-hover: #7F8088; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-search-color-branded-primary-focused: #93949D; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-search-color-branded-primary-disabled: #b9bac1; /* Default color for disabled form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-search-color-branded-secondary-enabled: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-search-color-branded-secondary-hover: rgba(255, 255, 255, 0.01); /* Used as a surface color on the enabled states of secondary controls such as dropdowns, text inputs and other form elements */
  --cp-search-color-branded-secondary-focused: rgba(255, 255, 255, 0.01); /* Used for auto-filled states of the form fields */
  --cp-search-color-branded-secondary-disabled: rgba(20, 20, 21, 0.04); /* Used for disabled states of secondary controls */
  --cp-search-color-accent-primary: #141415; /* Default color for non-selected form controls, e.g. inputs, radio buttons, switches or checkboxes */
  --cp-search-color-accent-tertiary: #6C6D73; /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-search-color-accent-disabled: rgba(20, 20, 21, 0.40); /* For selected form controls, e.g. checkboxes, radio buttons and switches */
  --cp-rating-color-primary-branded: #F55905; /* Used for branded star */
  --cp-rating-color-primary-branded-alternate: #F55905; /* Used for branded star border */
  --cp-rating-color-primary-classic: #EC6B51; /* Used for classic star */
  --cp-rating-color-primary-classic-alternate: #EC6B51; /* Used for classic star border */
  --cp-rating-color-secondary-high: #93949D; /* Used for interactive borders */
  --cp-rating-color-secondary-low: #CECED4; /* Used for non-interactive background */
  --cp-link-color-active-enabled: #F55905; /* This token is specifically for the active, enabled state of the link component */
  --cp-link-color-active-hover: #D64C00; /* This token is specifically for the active, hover state of the link component */
  --cp-link-color-visited-enabled: #7C53C1; /* This token is specifically for the active, enabled state of the switch component */
  --cp-link-color-visited-hover: #522B92; /* This token is specifically for the active, hover state of the switch component */
  --cp-floating-button-color-primary-enabled: #F55905; /* Theme accent color which is used for enabled states for icon buttons and floating buttons */
  --cp-floating-button-color-primary-hover: #FF7429; /* Theme accent color which is used for hover states for icon buttons and floating buttons */
  --cp-floating-button-color-primary-pressed: #D64C00; /* Theme accent color which is used for pressed states for icon buttons and floating buttons */
  --cp-floating-button-color-primary-disabled: rgba(20, 20, 21, 0.12); /* Theme accent color which is used for disabled states for icon buttons and floating buttons */
  --cp-color-brand-10: #FFE5D6;
  --cp-color-brand-20: #FFD1B8;
  --cp-color-brand-30: #FFB68F;
  --cp-color-brand-40: #FF9C66;
  --cp-color-brand-50: #FF7429;
  --cp-color-brand-60: #F55905;
  --cp-color-brand-70: #D64C00;
  --cp-color-brand-80: #B84100;
  --cp-color-brand-90: #943400;
  --cp-color-brand-95: #662400;
  --cp-color-brand-05: #FFF2EB;
  --cp-color-brand-light-primary: #F55905;
  --cp-color-brand-light-secondary: #FFFFFF;
  --cp-color-brand-light-onbranded: #FFFFFF;
  --cp-color-brand-light-accent: #F55905;
  --cp-color-brand-light-alternate: #F55905;
  --cp-color-brand-light-onalternate: #FFFFFF;
  --cp-color-brand-light-alpha-12: rgba(245, 89, 5, 0.12);
  --cp-color-brand-light-alpha-20: rgba(245, 89, 5, 0.20);
  --cp-color-brand-light-alpha-32: rgba(245, 89, 5, 0.32);
  --cp-color-brand-light-alpha-48: rgba(245, 89, 5, 0.48);
  --cp-color-brand-light-alpha-56: rgba(245, 89, 5, 0.56);
  --cp-color-brand-light-alpha-04: rgba(245, 89, 5, 0.04);
  --cp-color-brand-light-alpha-08: rgba(245, 89, 5, 0.08);
  --cp-color-brand-light-alpha-00: rgba(245, 89, 5, 0);
  --cp-color-brand-dark-primary: #FFB68F;
  --cp-color-brand-dark-secondary: #FFFFFF;
  --cp-color-brand-dark-onbranded: #141415;
  --cp-color-brand-dark-accent: #FFB68F;
  --cp-color-brand-dark-alternate: #FFB68F;
  --cp-color-brand-dark-onalternate: #141415;
  --cp-color-brand-dark-alpha-12: rgba(255, 182, 143, 0.12);
  --cp-color-brand-dark-alpha-20: rgba(255, 182, 143, 0.20);
  --cp-color-brand-dark-alpha-32: rgba(255, 182, 143, 0.32);
  --cp-color-brand-dark-alpha-48: rgba(255, 182, 143, 0.48);
  --cp-color-brand-dark-alpha-56: rgba(255, 182, 143, 0.56);
  --cp-color-brand-dark-alpha-04: rgba(255, 182, 143, 0.04);
  --cp-color-brand-dark-alpha-08: rgba(255, 182, 143, 0.08);
  --cp-color-brand-dark-alpha-00: rgba(255, 182, 143, 0);
  --cp-color-accent-10: #FFE5D6;
  --cp-color-accent-20: #FFD1B8;
  --cp-color-accent-30: #FFB68F;
  --cp-color-accent-40: #FF9C66;
  --cp-color-accent-50: #FF7429;
  --cp-color-accent-60: #F55905;
  --cp-color-accent-70: #D64C00;
  --cp-color-accent-80: #D64C00;
  --cp-color-accent-90: #943400;
  --cp-color-accent-95: #662400;
  --cp-color-accent-05: #FFF2EB;
  --cp-color-accent-light-primary: #F55905;
  --cp-color-accent-light-secondary: #FFFFFF;
  --cp-color-accent-light-onbranded: #FFFFFF;
  --cp-color-accent-light-accent: #D64C00;
  --cp-color-accent-light-alternate: #F55905;
  --cp-color-accent-light-onalternate: #FFFFFF;
  --cp-color-accent-light-alpha-12: rgba(245, 89, 5, 0.12);
  --cp-color-accent-light-alpha-20: rgba(245, 89, 5, 0.20);
  --cp-color-accent-light-alpha-32: rgba(245, 89, 5, 0.32);
  --cp-color-accent-light-alpha-48: rgba(245, 89, 5, 0.48);
  --cp-color-accent-light-alpha-56: rgba(245, 89, 5, 0.56);
  --cp-color-accent-light-alpha-04: rgba(245, 89, 5, 0.04);
  --cp-color-accent-light-alpha-08: rgba(245, 89, 5, 0.08);
  --cp-color-accent-light-alpha-00: rgba(245, 89, 5, 0);
  --cp-color-accent-dark-primary: #FFB68F;
  --cp-color-accent-dark-secondary: #FFFFFF;
  --cp-color-accent-dark-onbranded: #141415;
  --cp-color-accent-dark-accent: #FFD1B8;
  --cp-color-accent-dark-alternate: #FFB68F;
  --cp-color-accent-dark-onalternate: #141415;
  --cp-color-accent-dark-alpha-12: rgba(255, 182, 143, 0.12);
  --cp-color-accent-dark-alpha-20: rgba(255, 182, 143, 0.20);
  --cp-color-accent-dark-alpha-32: rgba(255, 182, 143, 0.32);
  --cp-color-accent-dark-alpha-48: rgba(255, 182, 143, 0.48);
  --cp-color-accent-dark-alpha-56: rgba(255, 182, 143, 0.56);
  --cp-color-accent-dark-alpha-04: rgba(255, 182, 143, 0.04);
  --cp-color-accent-dark-alpha-08: rgba(255, 182, 143, 0.08);
  --cp-color-accent-dark-alpha-00: rgba(255, 182, 143, 0);
  --cp-font-fallback: system-ui, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}