: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-text-answer: var(--iris-green-70);
    --company-color-answer: var(--iris-green-70);
    --company-color-answer-hover: var(--iris-green-60);
    --company-color-answer-active: var(--iris-green-80);
    --company-color-answer-focus: var(--iris-green-80);
    --company-color-answer-disabled: var(--iris-green-50);
    --company-color-answer-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);

    --company-color-admin-portal-queue-status-bar: var(--company-color-nav-panel-background, var(--iris-blue-10));
    --company-color-admin-portal-queue-status-label: var(--company-color-button-secondary-label, var(--iris-blue-80));
    --company-color-admin-portal-queue-status-label-hover: var(--company-color-button-secondary-label-hover, var(--iris-blue-100));

    --company-color-admin-portal-primary-border: var(--gray-30);
    --company-color-admin-portal-secondary-border: var(--gray-50);

    /*
    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));
  }