:root {
  --light-company-logo-admin: url('/assets/images/logo-ujet-white.svg');
  --light-company-logo-agent: url('/assets/images/logo-ujet-white.svg');
  --dark-company-logo-admin: url('/assets/images/logo-ujet-blue.svg');
  --dark-company-logo-agent: url('/assets/images/logo-ujet-blue.svg');
  --gray-company-logo-agent: url('/assets/images/logo-ujet-gray.svg');
  --gray-company-logo-agent-email: url('/assets/images/logo-ujet-gray.svg');

/* ------------------------------------------------------
WHEN ADDING NEW COLORS -
  A numerical suffix comes with certain expectations of appropriate use.
  00: Contrast ratio 1.01
      Background for text colors 70 through 100.
      Borders, shadows.
  10: Contrast ratio 1.1
      Background for text colors 70 through 100.
      Borders, shadows.
  20: Contrast ratio 1.2
      Backgrounds for text colors 80 through 100.
      Borders, shadows.
  30: Contrast ratio 1.5.
      Backgrounds for text colors 90 through 100.
      Borders, shadows.
  40: Contrast ratio 1.88.
      Backgrounds for text colors 100+.
      Borders, shadows.
  50: Contrast ratio 2.55
      Interactive elements without text, such as icon buttons.
      Borders, shadows.
  60: Contrast rato 3.15
      Text colors against white or black background only.
  70: Contrast ratio 4.5.
      Text colors against backgrounds 00 through 10.
  80: Contrast ratio 8.84.
      Text use on 00 through 20.
  90: Contrast ratio 11.29.
      Text use on 00 through 30.
 100: Contrast ratio 15.7:1.
      Text use on 00 through 40.
  Anything labeled as a specific number must have that contrast ratio.
  e.g.: blue-10 and green-10 must both have a contrast ratio of 1.2:1, period.
  When adding a new gradient, choose a number that is appropriately sorted.
  Should you choose to designate your own contrast ratios, please be advised:
  The following pairs MUST produce a contrast ratio of 3:1 or better:
  * -10 through 60 on -90 through -100.
  * -50 through -100 on white/00.
  The following pairs must produce a contrast ratio of 4.5:1 or better:
  * -60 through 90 on white/00
  * -white/00 through 40 on -100
  * white/00 through -10 on -80 through 100
------------------------------------------------------ */

/* ------------------------------------------------------
THEME FONTS
------------------------------------------------------ */

/* ONLY FOR THIS FILE */
--font-family-header: Noto Sans;
--font-family-body: Noto Sans;

/* USE THESE IN APP */
--company-font-header: var(--font-family-header);
--company-font-body: var(--font-family-body);


/* ------------------------------------------------------
THEME COLORS
  The colors defined below are referred to in the color tokens for convenience.
  They are NOT used throughout the app, only here, to create the theme, and thus
  may be replaced or renamed.
------------------------------------------------------ */

  /* black */
  --iris-black: #222222;
  /* whites */
  --iris-white: #fff;

  /* grays */
  --iris-gray-10: #F3F3F3;
  --iris-gray-20: #EAEAEA;
  --iris-gray-30: #D2D2D2;
  --iris-gray-40: #BCBCBC;
  --iris-gray-50: #A1A1A1;
  --iris-gray-60: #919191;
  --iris-gray-70: #767775;
  --iris-gray-80: #656662;
  --iris-gray-90: #4B4A49;
  --iris-gray-100: #3A3B36;
  --iris-gray-110: #232421;

  /** adapters need an alternate gray palette **/
  --iris-darker-gray-10: var(--iris-gray-20);
  --iris-darker-gray-20: var(--iris-gray-30);
  --iris-darker-gray-30: var(--iris-gray-40);
  --iris-darker-gray-40: var(--iris-gray-50);
  --iris-darker-gray-50: var(--iris-gray-60);
  --iris-darker-gray-60: var(--iris-gray-70);
  --iris-darker-gray-70: var(--iris-gray-80);
  --iris-darker-gray-80: var(--iris-gray-90);
  --iris-darker-gray-90: var(--iris-gray-100);
  --iris-darker-gray-100: var(--iris-gray-110);
  --iris-darker-gray-110: var(--iris-black);

  --iris-slate-blue-10: #F1F4F8;
  --iris-slate-blue-20: #E5EBF0;
  --iris-slate-blue-30: #C9D4DE;
  --iris-slate-blue-40: #ADBFCF;
  --iris-slate-blue-50: #8DA4B9;
  --iris-slate-blue-60: #7994AD;
  --iris-slate-blue-70: #5B7A95;
  --iris-slate-blue-80: #4F6881;
  --iris-slate-blue-90: #394C5F;
  --iris-slate-blue-100: #303C45;
  --iris-slate-blue-110: #1B252B;

  --iris-brand-blue-10: #EDF4FD;
  --iris-brand-blue-20: #DCECF9;
  --iris-brand-blue-30: #B7D7F0;
  --iris-brand-blue-40: #91C3E7;
  --iris-brand-blue-50: #64A8DB;
  --iris-brand-blue-60: #3498DB;
  --iris-brand-blue-70: #247BBF;
  --iris-brand-blue-80: #0A68B1;
  --iris-brand-blue-90: #0C4A8C;
  --iris-brand-blue-100: #043C6A;
  --iris-brand-blue-110: #03224F;

  --iris-azure-10: #E5F7FF;
  --iris-azure-20: #CCEFFF;
  --iris-azure-30: #99DBFF;
  --iris-azure-40: #61C7FF;
  --iris-azure-50: #00A9FF;
  --iris-azure-60: #0094FF;
  --iris-azure-70: #0271F3;
  --iris-azure-80: #0062CD;
  --iris-azure-90: #0238C5;
  --iris-azure-100: #002E9A;
  --iris-azure-110: #050E79;

  --iris-violet-10: #F2F3F8;
  --iris-violet-20: #E8E9F3;
  --iris-violet-30: #CED1E8;
  --iris-violet-40: #B8BADF;
  --iris-violet-50: #9A9DD4;
  --iris-violet-60: #888BD0;
  --iris-violet-70: #6E6EC1;
  --iris-violet-80: #5A5CB5;
  --iris-violet-90: #3E428E;
  --iris-violet-100: #30356E;
  --iris-violet-110: #202042;

  --iris-purple-10: #F7F3F4;
  --iris-purple-20: #EFE7E9;
  --iris-purple-30: #DACFDD;
  --iris-purple-40: #CAB7CD;
  --iris-purple-50: #B099BE;
  --iris-purple-60: #A487AE;
  --iris-purple-70: #8F699B;
  --iris-purple-80: #8A5090;
  --iris-purple-90: #69376E;
  --iris-purple-100: #59265E;
  --iris-purple-110: #34193A;

  --iris-wine-10: #F8F2F6;
  --iris-wine-20: #F3E7EE;
  --iris-wine-30: #E6CBD9;
  --iris-wine-40: #D6B3C8;
  --iris-wine-50: #C593AE;
  --iris-wine-60: #BE7E9D;
  --iris-wine-70: #AC5D86;
  --iris-wine-80: #974E6E;
  --iris-wine-90: #753647;
  --iris-wine-100: #642536;
  --iris-wine-110: #421320;

  --iris-red-10: #FFF0F0;
  --iris-red-20: #FEE4E3;
  --iris-red-30: #F9C6C7;
  --iris-red-40: #F6A9A9;
  --iris-red-50: #F57E7E;
  --iris-red-60: #F16262;
  --iris-red-70: #DB3846;
  --iris-red-80: #C61C3C;
  --iris-red-90: #92162D;
  --iris-red-100: #760F1F;
  --iris-red-110: #4B0816;

  --iris-orange-10: #FBF1EF;
  --iris-orange-20: #F8E7E0;
  --iris-orange-30: #F5CAB2;
  --iris-orange-40: #F1AE8A;
  --iris-orange-50: #F58155;
  --iris-orange-60: #F0663D;
  --iris-orange-70: #D2471A;
  --iris-orange-80: #B53C1C;
  --iris-orange-90: #862B14;
  --iris-orange-100: #6A230C;
  --iris-orange-110: #441A01;

  --iris-yellow-10: #FCF3DE;
  --iris-yellow-20: #F8E9C4;
  --iris-yellow-30: #F5CE7A;
  --iris-yellow-40: #F0B234;
  --iris-yellow-50: #D1970A;
  --iris-yellow-60: #B78A08;
  --iris-yellow-70: #937205;
  --iris-yellow-80: #82600F;
  --iris-yellow-90: #604603;
  --iris-yellow-100: #503512;
  --iris-yellow-110: #2E2201;

  --iris-lime-10: #EBF8D8;
  --iris-lime-20: #DCF2BB;
  --iris-lime-30: #AFE26C;
  --iris-lime-40: #90CF32;
  --iris-lime-50: #7BB12C;
  --iris-lime-60: #6F9F28;
  --iris-lime-70: #5B8221;
  --iris-lime-80: #497026;
  --iris-lime-90: #365213;
  --iris-lime-100: #2A4109;
  --iris-lime-110: #20260F;

  --iris-blue-10: #EDF4FD;
  --iris-blue-20: #DCECF9;
  --iris-blue-30: #B7D7F0;
  --iris-blue-40: #91C3E7;
  --iris-blue-50: #64A8DB;
  --iris-blue-60: #3498DB;
  --iris-blue-70: #247BBF;
  --iris-blue-80: #0A68B1;
  --iris-blue-90: #0C4A8C;
  --iris-blue-100: #043C6A;
  --iris-blue-110: #03224F;

  --iris-green-10: #E7F8E9;
  --iris-green-20: #D1F3D4;
  --iris-green-30: #A8E0B3;
  --iris-green-40: #7FCE8E;
  --iris-green-50: #5AB462;
  --iris-green-60: #43A44E;
  --iris-green-70: #0C8938;
  --iris-green-80: #17752C;
  --iris-green-90: #10561F;
  --iris-green-100: #0D441B;
  --iris-green-110: #062D15;

  --iris-turquoise-10: #EAF6F6;
  --iris-turquoise-20: #DCEDEF;
  --iris-turquoise-30: #B5D9E3;
  --iris-turquoise-40: #8CC6D4;
  --iris-turquoise-50: #57ADC1;
  --iris-turquoise-60: #479CB0;
  --iris-turquoise-70: #39808F;
  --iris-turquoise-80: #306E79;
  --iris-turquoise-90: #24505B;
  --iris-turquoise-100: #1E3F48;
  --iris-turquoise-110: #14262D;

  --iris-lime-40: #90CF32;


/* ------------------------------------------------------
COLOR TOKENS
  Everything below this point is used throughout the app.
------------------------------------------------------ */

/* ------------------------------------------------------
PRIMARY, SECONDARY, AND TERTIARY + UI SHADE
  The UI-SHADE ramp below is dominant in the UI, organizing content through small shifts in value (lightness vs darkness).  By default, it is a collection of grays.
  The Primary ramp is the primary action color.
  Additional colors are to be used purposefully, in active consideration towards the need for this color use.
  Not all users will be able to see the colors as intended due to color blindness.
  Those with protanopia and deuteranopia have trouble differentiating green from blue; those with protanopia also have trouble distinguishing blue and purple. Those with tritanopia have trouble distinguishing between blue and yellow.
  To this end:
  * Be mindful pairing greens with blues, pinks, and purples.
  * Be mindful pairing greens and blues.
  When choosing a color, please remember to find some other non-color dependent method of conveying meaning (bolded font, a border, a different contrast ratio, etc) when the user must understand that there is information to heed or an action to be performed.
------------------------------------------------------ */

  --company-color-primary-00: var(--iris-white);
  --company-color-primary-10: var(--iris-brand-blue-10);
  --company-color-primary-20: var(--iris-brand-blue-20);
  --company-color-primary-30: var(--iris-brand-blue-30);
  --company-color-primary-40: var(--iris-brand-blue-40);
  --company-color-primary-50: var(--iris-brand-blue-50);
  --company-color-primary-60: var(--iris-brand-blue-60);
  --company-color-primary-70: var(--iris-brand-blue-70);
  --company-color-primary-80: var(--iris-brand-blue-80);
  --company-color-primary-90: var(--iris-brand-blue-90);
  --company-color-primary-100: var(--iris-brand-blue-100);

  /* @TODO: Secondary ramp */
  --company-color-secondary-00: var(--iris-white);
  --company-color-secondary-10: var(--iris-slate-blue-10);
  --company-color-secondary-20: var(--iris-slate-blue-20);
  --company-color-secondary-30: var(--iris-slate-blue-30);
  --company-color-secondary-40: var(--iris-slate-blue-40);
  --company-color-secondary-50: var(--iris-slate-blue-50);
  --company-color-secondary-60: var(--iris-slate-blue-60);
  --company-color-secondary-70: var(--iris-slate-blue-70);
  --company-color-secondary-80: var(--iris-slate-blue-80);
  --company-color-secondary-90: var(--iris-slate-blue-90);
  --company-color-secondary-100: var(--iris-slate-blue-100);

  --company-color-tertiary-10: var(--iris-red-10);
  --company-color-tertiary-20: var(--iris-red-20);
  --company-color-tertiary-30: var(--iris-red-30);
  --company-color-tertiary-40: var(--iris-red-40);
  --company-color-tertiary-50: var(--iris-red-50);
  --company-color-tertiary-60: var(--iris-red-60);
  --company-color-tertiary-70: var(--iris-red-70);
  --company-color-tertiary-80: var(--iris-red-80);
  --company-color-tertiary-90: var(--iris-red-90);
  --company-color-tertiary-100: var(--iris-red-100);

  --company-color-ui-shade-00: var(--iris-white);
  --company-color-ui-shade-10: var(--iris-gray-10);
  --company-color-ui-shade-20: var(--iris-gray-20);
  --company-color-ui-shade-30: var(--iris-gray-30);
  --company-color-ui-shade-40: var(--iris-gray-40);
  --company-color-ui-shade-50: var(--iris-gray-50);
  --company-color-ui-shade-60: var(--iris-gray-60);
  --company-color-ui-shade-70: var(--iris-gray-70);
  --company-color-ui-shade-80: var(--iris-gray-80);
  --company-color-ui-shade-90: var(--iris-gray-90);
  --company-color-ui-shade-100: var(--iris-gray-100);

  /* @TODO: Add "secondary" and "tertiary". */

/* ------------------------------------------------------
  LAYOUT ELEMENTS
  Backgrounds, type, and borders
------------------------------------------------------ */

 /* Text on main background color */
 --company-color-text: var(--iris-gray-110);

 --company-color-background: var(--iris-white);
 --company-color-text-interactive-01: var(--company-color-primary-70);
 --company-color-text-disabled: var(--iris-gray-70);

 /* Text on colored and inverse backgrounds: */
 --company-color-text-inverse: var(--iris-white);
 --company-color-background-inverse: var(--iris-black);
 --company-color-border-inverse: var(--iris-white);

 --company-color-shadow: var(--company-color-ui-shade-10);

/* ------------------------------------------------------
INTERACTIVE ELEMENTS
  Colors meant for buttons, graphics, and links
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-interactive-{##}" and "--company-color-background"
  * "--company-color-interactive-{##}-label" and...
    * "--company-color-interactive-{##}"
    * "--company-color-interactive-{##}-hover"
    * "--company-color-interactive-{##}-focus"
------------------------------------------------------ */
  /* For interactive elements on a light background, e.g. buttons */
  --company-color-interactive-01-label: var(--iris-white);
  --company-color-interactive-01: var(--company-color-primary-70);
  --company-color-interactive-01-hover: var(--company-color-primary-60); /* highlight */
  --company-color-interactive-01-active: var(--company-color-primary-80); /* lowlight */
  --company-color-interactive-01-disabled: var(--iris-gray-60);
  --company-color-interactive-01-active-disabled: var(--company-color-primary-20);
  --company-color-interactive-01-disabled-label: var(--iris-gray-10);

  /* For interactive elements on a dark background, e.g. icons */
  --company-color-interactive-02-label: var(--company-color-primary-70);
  --company-color-interactive-02: var(--company-color-primary-20);
  --company-color-interactive-02-hover: var(--company-color-primary-10);
  --company-color-interactive-02-active: var(--company-color-primary-30);
  --company-color-interactive-02-disabled: var(--iris-gray-50);
  --company-color-interactive-02-disabled-label: var(--iris-gray-10);

  /* For interactive elements of lesser importance, in secondary color */
  --company-color-interactive-03-label: var(--iris-gray-70);
  --company-color-interactive-03: var(--iris-gray-70);
  --company-color-interactive-03-hover: var(--iris-gray-10);
  --company-color-interactive-03-active: var(--iris-gray-20);
  --company-color-interactive-03-disabled: var(--iris-gray-50);
  --company-color-interactive-03-disabled-label: var(--iris-gray-10);

  /* For CTA elements that must stand out */
  --company-color-interactive-04-label: var(--iris-white);
  --company-color-interactive-04: var(--company-color-tertiary-70);
  --company-color-interactive-04-hover: var(--company-color-tertiary-60);
  --company-color-interactive-04-active: var(--company-color-tertiary-80);
  --company-color-interactive-04-disabled: var(--iris-gray-50);
  --company-color-interactive-04-disabled-label: var(--iris-gray-10);


/* ------------------------------------------------------
FORM ELEMENT COLORS
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-formfield-label" and "--company-color-background"
  * "--company-color-text" and...
    * "--company-color-formfield-background-01"
    * "--company-color-formfield-background-02"
  Ensure that there is 3:1 (WCAG AA) contrast between
  * "--company-color-formfield-fill" and "--company-color-background"

------------------------------------------------------ */
--company-color-formfield-background-01: var(--iris-white);
--company-color-formfield-background-01-hover: var(--iris-gray-10);
--company-color-formfield-label: var(--company-color-text);
--company-color-formfield-text: var(--company-color-text);
--company-color-formfield-text-placeholder: var(--iris-gray-60);
--company-color-formfield-border: var(--company-color-ui-shade-50);
--company-color-formfield-focus: var(--company-color-primary-70);
--company-color-formfield-decorative-01: var(--company-color-primary-70);
--company-color-formfield-decorative-02: var(--company-color-ui-shade-60);
--company-color-formfield-decorative-03: var(--company-color-primary-10);
--company-color-formfield-disabled: var(--iris-gray-30);

/* ------------------------------------------------------
WARNING COLORS
  When advising you are about to make a destructive change.
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-warning" and "--company-color-background"
------------------------------------------------------ */
--company-color-text-warning: var(--iris-red-70);
--company-color-warning: var(--iris-red-70);
--company-color-warning-hover: var(--iris-red-60);
--company-color-warning-active: var(--iris-red-80);
--company-color-warning-focus: var(--iris-red-80);
--company-color-warning-disabled: var(--iris-gray-50);

/* ------------------------------------------------------
ALERT COLORS
  When giving priority notifications to a user.
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-success" and "--company-color-background"
------------------------------------------------------ */
--company-color-text-alert: var(--iris-orange-70);
--company-color-alert: var(--iris-orange-70);
--company-color-alert-inverse:  var(--iris-orange-20);
--company-color-alert-hover: var(--iris-orange-60);
--company-color-alert-active: var(--iris-orange-80);
--company-color-alert-focus: var(--iris-orange-80);
--company-color-alert-disabled: var(--iris-orange-50);
--company-color-alert-decorative-01: var(--iris-orange-50);


/* ------------------------------------------------------
INFORMATION COLORS
  When advising the user of additional, non-urgent information
  When constructing tooltips and notifications
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-information" and "--company-color-background"
------------------------------------------------------ */
--company-color-text-information: var(--iris-yellow-70);
--company-color-information-inverse: var(--iris-yellow-30);
--company-color-information: var(--iris-yellow-30);
--company-color-information-hover: var(--iris-yellow-60);
--company-color-information-active: var(--iris-yellow-80);
--company-color-information-focus: var(--iris-yellow-80);
--company-color-information-disabled: var(--iris-yellow-30);

/* ------------------------------------------------------
ERROR COLORS
  When advising the user of an error that has occurred
  When prompting the user to correct their input to resolve an error
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-error" and "--company-color-background"
------------------------------------------------------ */
--company-color-text-error: var(--iris-red-70);
--company-color-error: var(--iris-red-70);
--company-color-error-02: var(--iris-red-40);
--company-color-error-hover: var(--iris-red-60);
--company-color-error-active: var(--iris-red-80);
--company-color-error-focus: var(--iris-red-80);
--company-color-error-disabled: var(--iris-gray-50);
--company-color-error-decorative-01: var(--iris-red-50);


/* ------------------------------------------------------
SUCCESS COLORS
  When giving positive confirmation to the user
  Ensure that there is 4.5:1 (WCAG AA) contrast between
  * "--company-color-success" and "--company-color-background"
------------------------------------------------------ */
--company-color-text-success: var(--iris-green-70);
--company-color-success: var(--iris-green-70);
--company-color-success-hover: var(--iris-green-60);
--company-color-success-active: var(--iris-green-80);
--company-color-success-focus: var(--iris-green-80);
--company-color-success-disabled: var(--iris-green-50);
--company-color-success-decorative-01: var(--iris-green-50);

--company-color-chat-text: var(--iris-turquoise-80);
--company-color-chat-background: var(--iris-turquoise-20);
--company-color-chat-background-inverse: var(--iris-turquoise-80);
--company-color-chat-border: var(--iris-turquoise-40);
--company-color-chat-decorative-01: var(--iris-turquoise-60);
--company-color-chat-decorative-02: var(--iris-turquoise-80);

--company-color-call-text: var(--iris-blue-100);
--company-color-call-background: var(--iris-blue-40);
--company-color-call-background-inverse: var(--iris-blue-100);
--company-color-call-border: var(--iris-blue-60);
--company-color-call-decorative-01: var(--iris-blue-80);
--company-color-call-decorative-02: var(--iris-blue-100);

--company-color-email-background: var(--iris-blue-10);

--company-color-decorative-icon-background: var(--company-color-success);
--company-color-decorative-icon-label: var(--company-color-text-inverse);

/*
These variables will be used until we have a better system to support separate theming for the header
*/
--company-color-header-background: var(--company-color-primary-70);
--company-color-header-text: var(--company-color-text-inverse);

--company-color-header-menu-item-text: var(--company-color-text-inverse);
--company-color-header-menu-item-background: var(--company-color-interactive-01-active);
--company-color-header-menu-item-hover-text: var(--company-color-primary-70);
--company-color-header-menu-item-hover-background: var(--company-color-interactive-01-label);

/*
These variables will be used until we have a better system to support separate theming for the admin portal
*/
--company-color-admin-portal-agents-filter-text: var(--company-color-text);
--company-color-admin-portal-agents-filter-settings-interactive-text: var(--company-color-interactive-01);
--company-color-admin-portal-call-detail-text: var(--company-color-text-inverse);
--company-color-admin-portal-call-detail-dialog-sidebar-background: var(--company-color-interactive-01-active);
--company-color-admin-portal-call-detail-action-content-background: var(--company-color-interactive-01);
--company-color-admin-portal-call-detail-primary-button-text: var(--company-color-interactive-01-active);
--company-color-admin-portal-call-detail-primary-button-background: var(--company-color-background);
--company-color-admin-portal-call-detail-secondary-button-text: var(--company-color-text-inverse);
--company-color-admin-portal-call-detail-secondary-button-background: var(--company-color-interactive-01-active);
--company-color-admin-portal-holiday-drawer-background: var(--company-color-primary-10);
--company-color-admin-portal-input-element-active: var(--company-color-primary-80);

--company-color-admin-portal-background-success: var(--iris-green-10);
--company-color-admin-portal-border-success: var(--iris-green-30);
--company-color-admin-portal-background-warning: var(--iris-yellow-10);
--company-color-admin-portal-border-warning: var(--iris-yellow-30);

/*
These variables will be used until we have a better system to support separate theming for the chat/call adapters
*/
--company-color-agent-adapter-background: var(--company-color-primary-70);
--company-color-agent-adapter-text: var(--company-color-text-inverse);
--company-color-agent-adapter-select-background: rgba(255, 255, 255, 0.15);
--company-color-agent-adapter-select-active: var(--company-color-primary-70);
--company-color-agent-adapter-sms-text: var(--company-color-text);
--company-color-agent-adapter-sms-background: var(--company-color-background);
--company-color-agent-adapter-shortcut-text: var(--company-color-text);
--company-color-agent-adapter-primary-button-text: var(--company-color-interactive-02-label);
--company-color-agent-adapter-primary-button-background: var(--company-color-background);
--company-color-agent-adapter-secondary-button-background: rgba(255, 255, 255, 0);
--company-color-agent-adapter-track: var(--company-color-primary-00);
--company-color-agent-adapter-track-fill: var(--company-color-primary-90);
--company-color-agent-adapter-campaign-call-message-background: var(--company-color-primary-100);
--company-color-agent-adapter-in-call-action-button-icon: var(--company-color-primary-70);
--company-color-agent-adapter-in-call-action-button-background: var(--company-color-background);
--company-color-agent-adapter-in-call-action-button-border: var(--company-color-text-inverse);
--company-color-agent-adapter-unselected-chat-text: var(--company-color-text-interactive-01);

--company-color-agent-adapter-message-bubble-mine-background: var(--company-color-primary-70);
--company-color-agent-adapter-message-bubble-other-background: var(--company-color-ui-shade-10);
--company-color-agent-adapter-message-bubble-mine-text: var(--company-color-text-inverse);
--company-color-agent-adapter-message-bubble-other-text: var(--company-color-text);

--company-color-agent-adapter-outbound-call-button-interactive-label: var(--company-color-interactive-02-label);
--company-color-agent-adapter-outbound-call-button-interactive-background: var(--company-color-interactive-02);
--company-color-agent-adapter-outbound-call-button-interactive-hover: var(--company-color-interactive-02-hover);
--company-color-agent-adapter-outbound-call-background-color: var(--company-color-primary-70);
--company-color-agent-adapter-outbound-call-text: var(--company-color-text-inverse);
--company-color-agent-adapter-outbound-call-text-border: var(--company-color-primary-00);
--company-color-agent-adapter-outbound-call-keypad-text: var(--company-color-interactive-02-label);
--company-color-agent-adapter-outbound-call-keypad-hover-text: var(--company-color-interactive-02-label);
--company-color-agent-adapter-outbound-call-keypad-border: var(--company-color-interactive-02);

--company-color-agent-adapter-phone-number-selector-text: var(--company-color-primary-00);
--company-color-agent-adapter-phone-number-selector-background: var(--company-color-primary-70);
--company-color-agent-adapter-phone-number-selector-border: var(--company-color-interactive-02);
--company-color-agent-adapter-phone-number-selector-carot: var(--company-color-interactive-02);
--company-color-agent-adapter-phone-number-selector-search-text: var(--company-color-text-inverse);
--company-color-agent-adapter-phone-number-selector-dropdown-text: var(--company-color-primary-70);

--company-color-agent-adapter-missed-banner-background: var(--iris-gray-110);

--company-color-agent-adapter-chat-agt-primary-color-10: var(--company-color-primary-10);
--company-color-agent-adapter-chat-agt-primary-color-20: var(--company-color-primary-20);
--company-color-agent-adapter-chat-agt-primary-color-30: var(--company-color-primary-30);
--company-color-agent-adapter-chat-agt-primary-color-40: var(--company-color-primary-40);
--company-color-agent-adapter-chat-agt-primary-color-50: var(--company-color-primary-50);
--company-color-agent-adapter-chat-agt-primary-color-60: var(--company-color-primary-60);
--company-color-agent-adapter-chat-agt-primary-color-70: var(--company-color-primary-70);
--company-color-agent-adapter-chat-agt-primary-color-80: var(--company-color-primary-80);
--company-color-agent-adapter-chat-agt-primary-color-90: var(--company-color-primary-90);
--company-color-agent-adapter-chat-agt-primary-color-100: var(--company-color-primary-100);

--company-color-agent-adapter-call-agt-primary-color-10: var(--company-color-primary-10);
--company-color-agent-adapter-call-agt-primary-color-20: var(--company-color-primary-20);
--company-color-agent-adapter-call-agt-primary-color-30: var(--company-color-primary-30);
--company-color-agent-adapter-call-agt-primary-color-40: var(--company-color-primary-40);
--company-color-agent-adapter-call-agt-primary-color-50: var(--company-color-primary-50);
--company-color-agent-adapter-call-agt-primary-color-60: var(--company-color-primary-60);
--company-color-agent-adapter-call-agt-primary-color-70: var(--company-color-primary-70);
--company-color-agent-adapter-call-agt-primary-color-80: var(--company-color-primary-80);
--company-color-agent-adapter-call-agt-primary-color-90: var(--company-color-primary-90);
--company-color-agent-adapter-call-agt-primary-color-100: var(--company-color-primary-100);

--company-color-tab-adapter-background: var(--iris-white);
--company-color-tab-adapter-background-hover: var(--iris-blue-80);
--company-color-tab-adapter-background-active: var(--iris-blue-20);
--company-color-tab-adapter-background-disabled: var(--iris-white);
--company-color-tab-adapter-label: var(--iris-blue-110);
--company-color-tab-adapter-label-hover: var(--iris-white);
--company-color-tab-adapter-label-active: var(--iris-blue-110);
--company-color-tab-adapter-label-disabled: var(--iris-blue-40);


/*Admin portal*/
/* Background */
--company-color-email-background-primary: var(--company-color-background-primary, var(--iris-white));
--company-color-email-background-primary-hover: var(--company-color-background-primary-hover, var(--iris-gray-10));
--company-color-email-background-primary-active: var(--company-color-background-primary-active, var(--iris-blue-10));
--company-color-email-background-secondary: var(--company-color-background-secondary, var(--iris-gray-10));
--company-color-email-background-tertiary: var(--company-color-background-tertiary, var(--iris-slate-blue-10));
--company-color-email-background-overlay: var(--company-color-background-overlay, rgba(0, 0, 0, 0.8));
--company-color-email-background-error: var(--company-color-background-error, var(--iris-red-10));
--company-color-email-background-success: var(--company-color-background-success, var(--iris-green-10));
--company-color-email-background-warning: var(--company-color-background-warning, var(--iris-yellow-10));
--company-color-email-background-information: var(--company-color-background-information, var(--iris-gray-10));
/* Text */
--company-color-email-text-primary: var(--company-color-text-primary, var(--iris-gray-110));
--company-color-email-text-secondary: var(--company-color-text-secondary, var(--iris-gray-80));
--company-color-email-text-disabled: var(--company-color-text-disabled, var(--iris-gray-40));
--company-color-email-text-error: var(--company-color-text-error, var(--iris-red-80));
--company-color-email-text-success: var(--company-color-text-success, var(--iris-green-80));
--company-color-email-text-warning: var(--company-color-text-warning, var(--iris-yellow-80));
--company-color-email-text-information: var(--company-color-text-information, var(--iris-gray-110));
--company-color-email-text-placeholder: var(--company-color-text-placeholder, var(--iris-gray-80));
--company-color-email-text-helper: var(--company-color-text-helper, var(--iris-gray-110));
/* Icons */
--company-color-email-icon-primary: var(--company-color-icon-primary, var(--iris-gray-50));
--company-color-email-icon-secondary: var(--company-color-icon-secondary, var(--iris-gray-80));
--company-color-email-icon-tertiary: var(--company-color-icon-tertiary, var(--iris-gray-110));
--company-color-email-icon-interactive: var(--company-color-icon-interactive, var(--iris-blue-80));
--company-color-email-icon-interactive-disabled: var(--company-color-icon-interactive-disabled, var(--iris-blue-80));
--company-color-email-icon-inverse: var(--company-color-icon-inverse, var(--iris-white));
--company-color-email-icon-disabled: var(--company-color-icon-disabled, var(--iris-gray-40));
--company-color-email-icon-error: var(--company-color-icon-error, var(--iris-red-80));
--company-color-email-icon-warning: var(--company-color-icon-warning, var(--iris-yellow-80));
--company-color-email-icon-success: var(--company-color-icon-success, var(--iris-green-80));
--company-color-email-icon-information: var(--company-color-icon-information, var(--iris-gray-110));
/* Borders */
--company-color-email-border-primary: var(--company-color-border-primary, var(--iris-gray-30));
--company-color-email-border-secondary: var(--company-color-border-secondary, var(--iris-gray-50));
--company-color-email-border-tertiary: var(--company-color-border-tertiary, var(--iris-gray-110));
--company-color-email-border-interactive: var(--company-color-border-interactive, var(--iris-blue-80));
--company-color-email-border-error: var(--company-color-border-error, var(--iris-red-30));
--company-color-email-border-success: var(--company-color-border-success, var(--iris-green-30));
--company-color-email-border-warning: var(--company-color-border-warning, var(--iris-yellow-30));
--company-color-email-border-information: var(--company-color-border-information, var(--iris-gray-30));
--company-color-email-border-inverse: var(--company-color-border-inverse, var(--iris-white));
/* Links */
--company-color-email-link: var(--company-color-link, var(--iris-blue-80));
--company-color-email-link-hover: var(--company-color-link-hover, var(--iris-blue-100));
--company-color-email-link-active: var(--company-color-link-active, var(--iris-blue-110));
--company-color-email-link-visited: var(--company-color-link-visited, var(--iris-purple-80));
--company-color-email-link-disabled: var(--company-color-link-disabled, var(--iris-blue-40));
/* Primary Button */
--company-color-email-button-primary-background: var(--company-color-button-primary-background, var(--iris-blue-80));
--company-color-email-button-primary-background-hover: var(--company-color-button-primary-background-hover, var(--iris-blue-100));
--company-color-email-button-primary-background-active: var(--company-color-button-primary-background-active, var(--iris-blue-110));
--company-color-email-button-primary-background-disabled: var(--company-color-button-primary-background-disabled, var(--iris-blue-40));
--company-color-email-button-primary-label: var(--company-color-button-primary-label, var(--iris-white));
--company-color-email-button-primary-label-hover: var(--company-color-button-primary-label-hover, var(--iris-white));
--company-color-email-button-primary-label-active: var(--company-color-button-primary-label-active, var(--iris-white));
--company-color-email-button-primary-label-disabled: var(--company-color-button-primary-label-disabled,  var(--iris-white));
--company-color-email-button-secondary-background: var(--company-color-button-secondary-background, var(--iris-white));
--company-color-email-button-secondary-background-hover: var(--company-color-button-secondary-background-hover, var(--iris-blue-20));
--company-color-email-button-secondary-background-active: var(--company-color-button-secondary-background-active, var(--iris-blue-30));
--company-color-email-button-secondary-background-disabled: var(--company-color-button-secondary-background-disabled, var(--iris-white));
--company-color-email-button-secondary-label: var(--company-color-button-secondary-label, var(--iris-blue-80));
--company-color-email-button-secondary-label-hover: var(--company-color-button-secondary-label-hover, var(--iris-blue-100));
--company-color-email-button-secondary-label-active: var(--company-color-button-secondary-label-active, var(--iris-blue-110));
--company-color-email-button-secondary-label-disabled: var(--company-color-button-secondary-label-disabled, var(--iris-blue-40));
--company-color-email-button-secondary-border: var(--company-color-button-secondary-border, var(--iris-blue-80));
--company-color-email-button-secondary-border-hover: var(--company-color-button-secondary-border-hover, var(--iris-blue-100));
--company-color-email-button-secondary-border-active: var(--company-color-button-secondary-border-active, var(--iris-blue-110));
--company-color-email-button-secondary-border-disabled: var(--company-color-button-secondary-border-disabled, var(--iris-blue-40));
/* Tertiary Button */
--company-color-email-button-tertiary-background: var(--company-color-button-tertiary-background, transparent);
--company-color-email-button-tertiary-background-hover: var(--company-color-button-tertiary-background-hover, var(--iris-blue-20));
--company-color-email-button-tertiary-background-active: var(--company-color-button-tertiary-background-active, var(--iris-blue-30));
--company-color-email-button-tertiary-background-disabled: var(--company-color-button-tertiary-background, transparent);
--company-color-email-button-tertiary-label: var(--company-color-button-tertiary-label, var(--iris-blue-80));
--company-color-email-button-tertiary-label-hover: var(--company-color-button-tertiary-label-hover, var(--iris-blue-100));
--company-color-email-button-tertiary-label-active: var(--company-color-button-tertiary-label-active, var(--iris-blue-110));
--company-color-email-button-tertiary-label-disabled: var(--company-color-button-tertiary-label-disabled, transparent);
/* Hazzard Button*/
--company-color-email-button-hazard-background: var(--company-color-button-hazard-background, var(--iris-red-80));
--company-color-email-button-hazard-background-hover: var(--company-color-button-hazard-background-hover, var(--iris-red-100));
--company-color-email-button-hazard-background-active: var(--company-color-button-hazard-background-active, var(--iris-red-110));
--company-color-email-button-hazard-background-disabled: var(--company-color-button-hazard-background-disabled, var(--iris-red-40));
--company-color-email-button-hazard-label: var(--company-color-button-hazard-label, var(--iris-white));
--company-color-email-button-hazard-label-hover: var(--company-color-button-hazard-label, var(--iris-white));
--company-color-email-button-hazard-label-active: var(--company-color-button-hazard-label, var(--iris-white));
--company-color-email-button-hazard-label-disabled: var(--company-color-button-hazard-label, var(--iris-white));
/* Icon Button */
--company-color-email-button-icon-background: var(--company-color-button-icon-background, transparent);
--company-color-email-button-icon-background-hover: var(--company-color-button-icon-background-hover, var(--iris-blue-80));
--company-color-email-button-icon-background-active: var(--company-color-button-icon-background-active, var(--iris-blue-100));
--company-color-email-button-icon-background-disabled: var(--company-color-button-icon-background-disabled, transparent);
--company-color-email-button-icon-label: var(--company-color-button-icon-label, var(--iris-gray-80));
--company-color-email-button-icon-label-hover: var(--company-color-button-icon-label-hover, var(--iris-white));
--company-color-email-button-icon-label-active: var(--company-color-button-icon-label-active, var(--iris-white));
--company-color-email-button-icon-label-disabled: var(--company-color-button-icon-label-disabled, var(--iris-gray-40));
/* Navigation */
--company-color-email-nav-border-primary: var(--company-color-nav-border-primary, var(--iris-gray-30));
--company-color-email-nav-border-tertiary: var(--company-color-nav-border-tertiary, var(--iris-gray-110));
--company-color-email-nav-panel-background: var(--company-color-nav-panel-background, var(--iris-blue-10));
--company-color-email-nav-button-background: var(--company-color-nav-button-background, transparent);
--company-color-email-nav-button-background-hover: var(--company-color-nav-button-background-hover, var(--iris-blue-20));
--company-color-email-nav-button-background-selected: var(--company-color-nav-button-background-selected, var(--iris-azure-100));
--company-color-email-nav-button-icon: var(--company-color-nav-button-icon, var(--iris-gray-110));
--company-color-email-nav-button-icon-hover: var(--company-color-nav-button-icon-hover, var(--iris-azure-80));
--company-color-email-nav-button-icon-selected: var(--company-color-nav-button-icon-selected, var(--iris-white));
--company-color-email-nav-button-label: var(--company-color-nav-button-label, var(--iris-gray-110));
--company-color-email-nav-button-label-hover: var(--company-color-nav-button-label-hover, var(--iris-azure-80));
--company-color-email-nav-button-label-selected: var(--company-color-nav-button-label-selected, var(--iris-white));
--company-color-email-nav-button-lit-hover: var(--company-color-nav-button-lit-hover, var(--iris-blue-80));
--company-color-email-nav-menu-panel-background: var(--company-color-nav-menu-panel-background,#F8FBFF);
--company-color-email-nav-menu-background: var(--company-color-nav-menu-background, transparent);
--company-color-email-nav-menu-background-hover: var(--company-color-nav-menu-background-hover, var(--iris-azure-80));
--company-color-email-nav-menu-background-selected: var(--company-color-nav-menu-background-selected, var(--iris-azure-100));
--company-color-email-nav-menu-icon: var(--company-color-nav-menu-icon, var(--iris-white));
--company-color-email-nav-menu-icon-hover: var(--company-color-nav-menu-icon-hover, var(--iris-white));
--company-color-email-nav-menu-icon-selected: var(--company-color-nav-menu-icon-selected, var(--iris-white));
--company-color-email-nav-menu-outline-hover: var(--company-color-nav-menu-outline-hover, var(--iris-blue-80));
--company-color-email-nav-menu-label: var(--company-color-nav-menu-label, var(--iris-gray-110));
--company-color-email-nav-top-bar-background: var(--company-color-nav-top-bar-background, var(--iris-blue-10));
--company-color-email-nav-tab-label: var(--company-color-nav-tab-label, var(--iris-gray-110));
--company-color-email-nav-tab-label-hover: var(--company-color-nav-tab-label-hover, var(--iris-azure-80));
--company-color-email-nav-tab-label-selected: var(--company-color-nav-tab-label-selected, var(--iris-gray-110));
--company-color-email-nav-tab-lit: var(--company-color-nav-tab-lit, transparent);
--company-color-email-nav-tab-lit-hover: var(--company-color-nav-tab-lit-hover, var(--iris-azure-80));
--company-color-email-nav-tab-lit-selected: var(--company-color-nav-tab-lit-selected, var(--iris-azure-110));
/* Checkbox */
--company-color-email-checkbox-background: var(--company-color-checkbox-background, var(--iris-white));
--company-color-email-checkbox-background-active: var(--company-color-checkbox-background-active, var(--iris-blue-80));
--company-color-email-checkbox-background-active-disabled: var(--company-color-checkbox-background-active-disabled, var(--iris-blue-40));
--company-color-email-checkbox-background-disabled: var(--company-color-checkbox-background-disabled, var(--iris-white));
--company-color-email-checkbox-background-error: var(--company-color-checkbox-background-error, var(--iris-white));
--company-color-email-checkbox-border: var(--company-color-checkbox-border, var(--iris-gray-80));
--company-color-email-checkbox-border-active: var(--company-color-checkbox-border-active, var(--iris-blue-80));
--company-color-email-checkbox-border-active-disabled: var(--company-color-checkbox-border-active-disabled, var(--iris-blue-40));
--company-color-email-checkbox-border-disabled: var(--company-color-checkbox-border-disabled, var(--iris-gray-40));
--company-color-email-checkbox-border-error: var(--company-color-checkbox-border-error, var(--iris-red-80));
--company-color-email-checkbox-icon: var(--company-color-checkbox-icon, var(--iris-gray-80));
--company-color-email-checkbox-icon-active: var(--company-color-checkbox-icon-active, var(--iris-white));
--company-color-email-checkbox-icon-active-disabled: var(--company-color-checkbox-icon-active-disaled, var(--iris-white));
--company-color-email-checkbox-icon-disabled: var(--company-color-checkbox-icon-disabled, var(--iris-gray-40));
/* Radio */
--company-color-email-radio-background: var(--company-color-radio-background, var(--iris-white));
--company-color-email-radio-background-active: var(--company-color-radio-background-active, var(--iris-white));
--company-color-email-radio-background-active-disabled: var(--company-color-radio-background-active-disabled, var(--iris-white));
--company-color-email-radio-background-disabled: var(--company-color-radio-background-disabled, var(--iris-white));
--company-color-email-radio-border: var(--company-color-radio-border, var(--iris-gray-80));
--company-color-email-radio-border-active: var(--company-color-radio-border-active, var(--iris-blue-80));
--company-color-email-radio-border-active-disabled: var(--company-color-radio-border-active-disabled, var(--iris-blue-40));
--company-color-email-radio-border-disabled: var(--company-color-radio-border-disabled, var(--iris-gray-40));
--company-color-email-radio-thumb: var(--company-color-radio-thumb, var(--iris-white));
--company-color-email-radio-thumb-active: var(--company-color-radio-thumb, var(--iris-blue-80));
--company-color-email-radio-thumb-active-disabled: var(--company-color-radio-thumb, var(--iris-blue-40));
--company-color-email-radio-thumb-disabled: var(--company-color-radio-thumb, var(--iris-white));
/* Toogle */
--company-color-email-toggle-background: var(--company-color-toggle-background, var(--iris-white));
--company-color-email-toggle-background-active: var(--company-color-toggle-background-active, var(--iris-blue-80));
--company-color-email-toggle-background-active-disabled: var(--company-color-toggle-background-active-disabled, var(--iris-blue-40));
--company-color-email-toggle-background-disabled: var(--company-color-toggle-background-disabled, var(--iris-white));
--company-color-email-toggle-border: var(--company-color-toggle-border, var(--iris-gray-80));
--company-color-email-toggle-border-active: var(--company-color-toggle-border-active, var(--iris-blue-80));
--company-color-email-toggle-border-active-disabled: var(--company-color-toggle-border-active-disabled, var(--iris-blue-40));
--company-color-email-toggle-border-disabled: var(--company-color-toggle-border-disabled, var(--iris-gray-40));
--company-color-email-toggle-thumb: var(--company-color-toggle-thumb, var(--iris-gray-80));
--company-color-email-toggle-thumb-active: var(--company-color-toggle-thumb-active, var(--iris-white));
--company-color-email-toggle-thumb-active-disabled: var(--company-color-toggle-thumb-active-disabled, var(--iris-white));
--company-color-email-toggle-thumb-disabled: var(--company-color-toggle-thumb-disabled, var(--iris-gray-40));
/* Tabs */
--company-color-email-tab-background: var(--company-color-tab-background, transparent);
--company-color-email-tab-background-hover: var(--company-color-background-hover, var(--iris-gray-10));
--company-color-email-tab-background-active: var(--company-color-background-active, var(--iris-blue-10));
--company-color-email-tab-label: var(--company-color-tab-label, var(--iris-gray-80));
--company-color-email-tab-label-hover: var(--company-color-tab-label-hover, var(--iris-gray-80));
--company-color-email-tab-label-active: var(--company-color-tab-label-active, var(--iris-gray-110));
--company-color-email-tab-lit: var(--company-color-color-tab-lit, transparent);
--company-color-email-tab-lit-hover: var(--company-color-tab-lit-hover, var(--iris-blue-80));
--company-color-email-tab-lit-active: var(--company-color-tab-lit-active, var(--iris-blue-110));
/* Tags */
--company-color-email-tag-background-primary: var(--company-color-tag-background-primary, var(--iris-white));
--company-color-email-tag-background-primary-active: var(--company-color-tag-background-primary-active, var(--iris-blue-10));
--company-color-email-tag-background-primary-disabled: var(--company-color-tag-background-primary-disabled, var(--iris-gray-10));
--company-color-email-tag-background-primary-error: var(--company-color-tag-background-primary-error, var(--iris-red-10));
--company-color-email-tag-background-secondary: var(--company-color-tag-background-secondary, var(--iris-gray-10));
--company-color-email-tag-background-agent: var(--company-color-tag-background-agent, var(--iris-azure-10));
--company-color-email-tag-background-manager: var(--company-color-tag-background-manager, var(--iris-lime-10));
--company-color-email-tag-background-admin: var(--company-color-tag-background-admin, var(--iris-wine-10));
--company-color-email-tag-border: var(--company-color-tag-border, var(--iris-gray-50));
--company-color-email-tag-border-active: var(--company-color-tag-border-active, var(--iris-blue-100));
--company-color-email-tag-border-disabled: var(--company-color-tag-border-disabled, var(--iris-gray-50));
--company-color-email-tag-border-error: var(--company-color-tag-border-error, var(--iris-red-30));
--company-color-email-tag-border-agent: var(--company-color-tag-border-agent, var(--iris-azure-50));
--company-color-email-tag-border-manager: var(--company-color-tag-border-manager, var(--iris-lime-50));
--company-color-email-tag-border-admin: var(--company-color-tag-border-admin, var(--iris-wine-50));
--company-color-email-tag-handle: var(--company-color-tag-handle, var(--iris-blue-80));
--company-color-email-tag-handle-active: var(--company-color-tag-handle-active, var(--iris-blue-100));
--company-color-email-tag-handle-disabled: var(--company-color-tag-handle-disabled, var(--iris-gray-50));
--company-color-email-tag-label: var(--company-color-tag-label, var(--iris-gray-110));
--company-color-email-tag-label-active: var(--company-color-tag-label-active, var(--iris-gray-110));
--company-color-email-tag-label-disabled: var(--company-color-tag-label-disabled, var(--iris-gray-80));
--company-color-email-tag-label-error: var(--company-color-tag-label-error, var(--iris-gray-110));
/* Dynamic Tags */
--company-color-email-tag-dynamic-background: var(--company-color-tag-dynamic-background, var(--iris-azure-20));
--company-color-email-tag-dynamic-background-hover: var(--company-color-tag-dynamic-background-hover, var(--iris-azure-30));
--company-color-email-tag-dynamic-background-active: var(--company-color-tag-dynamic-background-active, var(--iris-azure-40));
--company-color-email-tag-dynamic-label: var(--company-color-tag-dynamic-label, var(--iris-azure-90));
--company-color-email-tag-dynamic-label-hover: var(--company-color-tag-dynamic-label-hover, var(--iris-azure-100));
--company-color-email-tag-dynamic-label-active: var(--company-color-tag-dynamic-label-active, var(--iris-azure-110));
/* Tables */
/* Header */
--company-color-email-table-header-background: var(--company-color-table-header-background, var(--iris-gray-10));
--company-color-email-table-header-background-hover: var(--company-color-table-header-background-hover, var(--iris-gray-20));
--company-color-email-table-header-background-active: var(--company-color-table-header-background-active, var(--iris-gray-30));
--company-color-email-table-header-border-primary: var(--company-color-table-header-border-primary, var(--iris-gray-30));
--company-color-email-table-header-border-secondary: var(--company-color-table-header-border-secondary, var(--iris-gray-50));
/* Row */
--company-color-email-table-row-background: var(--company-color-table-row-background, var(--iris-white));
--company-color-email-table-row-background-hover: var(--company-color-table-row-background-hover, var(--iris-gray-10));
--company-color-email-table-row-background-active: var(--company-color-table-row-background-active, var(--iris-blue-10));
--company-color-email-table-row-background-active-disabled: var(--company-color-table-row-background-active-disabled, var(--iris-blue-10));
--company-color-email-table-row-border: var(--company-color-table-row-border, var(--iris-gray-30));
--company-color-email-table-row-border-active: var(--company-color-table-row-border-active, var(--iris-blue-100));
/* Focus */
--company-color-email-focus: var(--company-color-focus, var(--iris-blue-80));
--company-color-email-focus-inverse: var(--company-color-focus-inverse, var(--iris-white));
/* Progress Track */
--company-color-email-track-progress-unfilled: var(--company-color-progress-unfilled, var(--iris-white));
--company-color-email-track-progress: var(--company-color-progress, var(--iris-gray-50));
--company-color-email-track-progress-running: var(--company-color-progress-running, var(--iris-green-90));
/* Slider Track */
--company-color-email-track-slider-unfilled: var(--company-color-track-slider-unfilled, var(--iris-gray-30));
--company-color-email-track-slider-unfilled-disabled: var(--company-color-track-slider-unfilled-disabled, var(--iris-gray-20));
--company-color-email-track-slider-filled: var(--company-color-track-slider-filled, var(--iris-blue-80));
--company-color-email-track-slider-filled-disabled: var(--company-color-track-slider-filled-disabled, var(--iris-blue-40));
--company-color-email-track-slider-thumb: var(--company-color-track-slider-thumb, var(--iris-blue-80));
--company-color-email-track-slider-thumb-hover: var(--company-color-track-slider-thumb-hover, var(--iris-blue-100));
--company-color-email-track-slider-thumb-active: var(--company-color-track-slider-thumb-active, var(--iris-blue-110));
--company-color-email-track-slider-thumb-disabled: var(--company-color-track-slider-thumbd-disabled, var(--iris-blue-40));
--company-color-email-track-slider-thumb-overlay: var(--company-color-track-slider-thumb-overlay, rgba(10, 104, 177, 0,2));
/* Forms */
--company-color-email-form-background: var(--company-color-form-background, var(--iris-white));
--company-color-email-form-background-active: var(--company-color-form-background-active, var(--iris-white));
--company-color-email-form-background-disabled: var(--company-color-form-background-disabled, var(--iris-gray-10));
--company-color-email-form-background-error: var(--company-color-form-background-error, var(--iris-white));
--company-color-email-form-border: var(--company-color-form-border, var(--iris-gray-80));
--company-color-email-form-border-active: var(--company-color-form-border-active, var(--iris-blue-80));
--company-color-email-form-border-disabled: var(--company-color-form-border-disabled, var(--iris-gray-80));
--company-color-email-form-border-error: var(--company-color-form-border-error, var(--iris-red-80));
--company-color-email-form-label: var(--company-color-form-label, var(--iris-gray-110));
--company-color-email-form-label-active: var(--company-color-form-label-active, var(--iris-gray-110));
--company-color-email-form-label-disabled: var(--company-color-form-label-disabled, var(--iris-gray-80));
--company-color-email-form-label-error: var(--company-color-form-label-error, var(--iris-gray-110));
--company-color-email-form-text: var(--company-color-form-text, var(--iris-gray-110));
--company-color-email-form-text-active: var(--company-color-form-text-active, var(--iris-gray-110));
--company-color-email-form-text-disabled: var(--company-color-form-text-disabled, var(--iris-gray-110));
--company-color-email-form-text-error: var(--company-color-form-text-error, var(--iris-gray-110));
--company-color-email-form-icon: var(--company-color-form-icon, var(--iris-gray-110));
--company-color-email-form-icon-active: var(--company-color-form-icon-active, var(--iris-gray-110));
--company-color-email-form-icon-disabled: var(--company-color-form-icon-disabled, var(--iris-gray-80));
--company-color-email-form-icon-error: var(--company-color-form-icon-error, var(--iris-gray-110));
--company-color-email-form-select-background: var(--company-color-form-select-background, var(--iris-white));
--company-color-email-form-select-background-hover: var(--company-color-form-select-background-hover, var(--iris-gray-20));
--company-color-email-form-select-background-active: var(--company-color-form-select-background-active, var(--iris-gray-30));
--company-color-email-form-select-background-disabled: var(--company-color-form-select-background-disabled, var(--iris-gray-10));
--company-color-email-form-select-background-error: var(--company-color-form-select-background-error, var(--iris-white));
/* File Uploader */
--company-color-email-uploader-background: var(--company-color-uploader-background, var(--iris-white));
--company-color-email-uploader-background-hover: var(--company-color-uploader-background-hover, var(--iris-blue-10));
--company-color-email-uploader-background-disabled: var(--company-color-uploader-background-disabled, var(--iris-gray-10));
--company-color-email-uploader-background-error: var(--company-color-uploader-background-error, var(--iris-white));
--company-color-email-uploader-border: var(--company-color-uploader-border, var(--iris-gray-80));
--company-color-email-uploader-border-hover: var(--company-color-uploader-border-hover, var(--iris-blue-80));
--company-color-email-uploader-border-disabled: var(--company-color-uploader-border-disabled, var(--iris-gray-80));
--company-color-email-uploader-border-error: var(--company-color-uploader-border-error, var(--iris-red-80));
--company-color-email-uploader-label: var(--company-color-uploader-label, var(--iris-gray-110));
--company-color-email-uploader-label-hover: var(--company-color-uploader-label-hover, var(--iris-gray-110));
--company-color-email-uploader-label-disabled: var(--company-color-uploader-label-disabled, var(--iris-gray-80));
--company-color-email-uploader-label-error: var(--company-color-uploader-label-error, var(--iris-gray-110));
--company-color-email-uploader-icon: var(--company-color-uploader-icon, var(--iris-blue-80));
--company-color-email-uploader-icon-hover: var(--company-color-uploader-icon-hover, var(--iris-blue-80));
--company-color-email-uploader-icon-disabled: var(--company-color-uploader-icon-disabled, var(--iris-blue-40));
--company-color-email-uploader-icon-error: var(--company-color-uploader-icon-error, var(--iris-blue-80));
/* Drag */
--company-color-email-drag: var(--company-color-drag, var(--iris-azure-60));
/* Scroll */
--company-color-email-scroll: var(--company-color-scroll, var(--iris-gray-80));
/* Tooltip */
--company-color-email-tooltip-icon: var(--company-color-tooltip-icon, var(--iris-blue-80));
--company-color-email-tooltip-background: var(--company-color-tooltip-background, var(--iris-slate-blue-110));
--company-color-email-tooltip-text: var(--company-color-tooltip-text, var(--iris-white));
}