:root {
    --ia-refined-primary: var(--gbi-blue-midnight);
    --ia-structured-primary: var(--gbi-blue-heritage);
    --ia-expressive-primary: var(--gbi-blue-heritage);

    --primary-color: var(--ia-color-blue-8);
    --primary-contrast-color:#ffffff;
    --lightest-color: var(--ia-color-blue-5);
    --lighter-color: #2861ff;
    --light-color: var(--ia-color-blue-7);
    --dark-color: var(--ia-color-blue-9);
    --darker-color: #001770;
    --darkest-color: var(--ia-color-blue-10);
    --alert-color:#ffface;
    --caution-color: #e2c300;
    --caution-light-color: #625500;
    --disabled-color: var(--ia-color-grey-4);
    --disabled-light-color:#c7c7c7;
    --error-color:#e71313;
    --error-light-color:#fdeded;
    --success-color:#318500;
    --success-light-color:#eff6eb;
    --text-color: #1b1b1b;
    --warning-color:#ef6d19;
    --warning-light-color:#fef4ed;
    --ia-logo-elephant-color: var(--ia-color-grey-6);
    --active-color: var(--ia-color-blue-6);

    /* iA Design System colors */
    --ia-color-blue-1: #e3f2fd;
    --ia-color-blue-2: #cae5fb;
    --ia-color-blue-3: #b4d9f9;
    --ia-color-blue-4: #729eff;
    --ia-color-blue-5: #407bff;
    --ia-color-blue-6: #2962ff;
    --ia-color-blue-7: #2062d4;
    --ia-color-blue-8: #003da5;
    --ia-color-blue-9: #002688;
    --ia-color-blue-10: #000548;
    --ia-color-babygreen-1: #edf7df;
    --ia-color-elements-grey: #7f7f7f;
    --ia-color-elements-teal: #3f92a6;
    --ia-color-grey-1: #eff1f4;
    --ia-color-grey-2: #e0e4e9;
    --ia-color-grey-3: #d3d8de;
    --ia-color-grey-4: #bbc2ca;
    --ia-color-grey-5: #97a1b0;
    --ia-color-grey-6: #7c878e;

    --ia-color-pear1: #e6fa5e;
    --ia-color-pear2: #d9ec5a;
    --ia-color-pear3: #cddc3a;
    --ia-color-pear4: #c0ca33;
    --ia-color-pear5: #e6fa5e;

    --ia-color-type-main: #1b1b1b;
    --ia-color-type-control: #6b6b6b;
    --ia-color-type-reversed: #fff;

    /* === GBI Design System Colors === */
    --gbi-blue-heritage: #064dd9;
    --gbi-blue-midnight: #01233f;
    --gbi-blue-sky: #73c4ef;
    --gbi-blue-haze: #dbf0ff;
    --gbi-grey-elephant: #8c8c87;
    --gbi-taupe: #756b5f;
    --gbi-beige: #e2dcd0;
    --gbi-white: #fff;
    --gbi-blue-enabled: #064dd9;
    --gbi-blue-hover: #2962ff;
    --gbi-blue-active: #003da5;
    --gbi-grey-disabled: #bbc2ca;
    /* END */

    /* iA Design System fonts */
    --ia-font-opensans: "Open Sans", sans-serif;

    --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --title-font-family: Montserrat, "Arial black", sans-serif;
}

html:has(body.ia-dxp-refined-theme) {
    --primary-color: var(--ia-refined-primary);
}

html:has(body.ia-dxp-structured-theme),
html:has(body.ia-dxp-expressive-theme) {
    --primary-color: var(--ia-structured-primary);
}
html:has(body.ia-dxp-refined-theme),
html:has(body.ia-dxp-structured-theme),
html:has(body.ia-dxp-expressive-theme) {
    --light-color: var(--gbi-blue-hover);  
    --disabled-color: var(--gbi-grey-disabled);  
    --lightest-color: var(--gbi-blue-hover);
    --active-color: var(--gbi-blue-active);
    --ia-logo-elephant-color: var(--gbi-grey-elephant);
    --ia-dxp-card-header-icon-color: var(--gbi-blue-heritage);
    --form-layout-background-color: var(--gbi-blue-haze);

    --ia-dxp-title-t0-text-transform: none;
    --ia-dxp-title-t0-font-size: 38px;
    --ia-dxp-title-t0-font-variant-ligatures: none;
    --ia-dxp-themed-title-t2-font-weight: normal;
    --ia-dxp-themed-title-t2-font-size: 32px;
    --title-font-family: Muoto, Montserrat, "Arial black", sans-serif;
    --ia-dxp-card-border-radius: 0 72px 0 0;
    --ia-dxp-card-box-shadow: none;
}

/* button */
:root {
    /* button primary */
    --ia-dxp-button-primary-solid-color: var(--primary-color);
    --ia-dxp-button-primary-solid-contrast: var(--primary-contrast-color);
    --ia-dxp-button-primary-solid-border-radius: 25px;
    --ia-dxp-button-primary-solid-height: 50px;
    --ia-dxp-button-primary-solid-width: inherit;
    --ia-dxp-button-primary-solid-line-height: 50px;
    --ia-dxp-button-primary-solid-font-size: 17px;
    --ia-dxp-button-primary-solid-font-weight: bold;
    --ia-dxp-button-primary-solid-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px 0px;
    --ia-dxp-button-primary-solid-border: 0px solid  var(--ia-dxp-button-primary-solid-color);
    /* button hover */
    --ia-dxp-button-primary-solid-hover-color: var(--light-color);
    --ia-dxp-button-primary-solid-hover-contrast: var(--ia-dxp-button-primary-solid-contrast);
    --ia-dxp-button-primary-solid-hover-border: var(--ia-dxp-button-primary-solid-border);
    /* button disabled */
    --ia-dxp-button-primary-solid-disabled-color: var(--disabled-color);
    /* button active */
    --ia-dxp-button-primary-solid-active-color: var(--active-color);
    
    /* button primary-outline */
    --ia-dxp-button-primary-outline-color: transparent;
    --ia-dxp-button-primary-outline-contrast: var(--primary-color);
    --ia-dxp-button-primary-outline-border-radius: 25px;
    --ia-dxp-button-primary-outline-height: 50px;
    --ia-dxp-button-primary-outline-width: inherit;
    --ia-dxp-button-primary-outline-line-height: 46px;
    --ia-dxp-button-primary-outline-font-size: 17px;
    --ia-dxp-button-primary-outline-font-weight: bold;
    --ia-dxp-button-primary-outline-box-shadow: none;
    --ia-dxp-button-primary-outline-border: 2px solid var(--ia-dxp-button-primary-outline-contrast);
    /* button primary-outline hover */
    --ia-dxp-button-primary-outline-hover-color: transparent;
    --ia-dxp-button-primary-outline-hover-contrast: var(--light-color);
    --ia-dxp-button-primary-outline-hover-border: 2px solid var(--light-color);
    /* button primary-outline disable */
    --ia-dxp-button-primary-outline-disabled-color: transparent;
    --ia-dxp-button-primary-outline-disabled-contrast: var(--disabled-color);
    --ia-dxp-button-primary-outline-disabled-border-color: var(--disabled-color);
    /* button primary-outline active, focus */
    --ia-dxp-button-primary-outline-active-color: var(--active-color);
    --ia-dxp-button-primary-outline-active-border: 2px solid var(--active-color);

    /* button secondary-solid */
    --ia-dxp-button-secondary-solid-color: var(--primary-color);
    --ia-dxp-button-secondary-solid-contrast: var(--primary-contrast-color);
    --ia-dxp-button-secondary-solid-border-radius: 4px;
    --ia-dxp-button-secondary-solid-height: 40px;
    --ia-dxp-button-secondary-solid-width: inherit;
    --ia-dxp-button-secondary-solid-line-height: 24px;
    --ia-dxp-button-secondary-solid-font-size: 14px;
    --ia-dxp-button-secondary-solid-font-weight: bold;
    --ia-dxp-button-secondary-solid-box-shadow: rgba(33, 33, 33, 0.25) 0px 1px 0px 0px;
    --ia-dxp-button-secondary-solid-border: 0px solid var(--ia-dxp-button-secondary-solid-color);
    /* button secondary-solid hover */
    --ia-dxp-button-secondary-solid-hover-color: var(--light-color);
    --ia-dxp-button-secondary-solid-hover-contrast: var(--ia-dxp-button-secondary-solid-contrast);
    --ia-dxp-button-secondary-solid-hover-border: var(--ia-dxp-button-secondary-solid-border);
    /* button secondary-solid disabled */
    --ia-dxp-button-secondary-solid-disabled-color: var(--disabled-color);
    /* button secondary-solid active, focus */
    --ia-dxp-button-secondary-solid-active-color: var(--active-color);

    /* button secondary-outline */
    --ia-dxp-button-secondary-outline-color: transparent;
    --ia-dxp-button-secondary-outline-contrast: var(--primary-color);
    --ia-dxp-button-secondary-outline-border-radius: var(--ia-dxp-button-secondary-solid-border-radius);
    --ia-dxp-button-secondary-outline-height: var(--ia-dxp-button-secondary-solid-height);
    --ia-dxp-button-secondary-outline-width: inherit;
    --ia-dxp-button-secondary-outline-line-height: var(--ia-dxp-button-secondary-solid-line-height);
    --ia-dxp-button-secondary-outline-font-size: var(--ia-dxp-button-secondary-solid-font-size);
    --ia-dxp-button-secondary-outline-font-weight: var(--ia-dxp-button-secondary-solid-font-weight);
    --ia-dxp-button-secondary-outline-box-shadow: none;
    --ia-dxp-button-secondary-outline-border: 1px solid var(--ia-dxp-button-secondary-outline-contrast);;
    /* button secondary-outline hover */
    --ia-dxp-button-secondary-outline-hover-color: transparent;
    --ia-dxp-button-secondary-outline-hover-contrast: var(--light-color);
    --ia-dxp-button-secondary-outline-hover-border: 2px solid var(--light-color);
    /* button secondary-outline disabled */
    --ia-dxp-button-secondary-outline-disabled-color: rgb(255, 255, 255);
    --ia-dxp-button-secondary-outline-disabled-contrast: var(--disabled-color);
    --ia-dxp-button-secondary-outline-disabled-border-color: var(--disabled-color);
    /* button secondary-outline active, focus */
    --ia-dxp-button-secondary-outline-active-color: var(--active-color);
    --ia-dxp-button-secondary-outline-active-border: 2px solid var(--active-color);

    /* button footer-solid */
    --ia-dxp-button-footer-solid-border: 1px solid var(--ia-color-grey-1);
    --ia-dxp-button-footer-solid-border-radius: 25px;
    --ia-dxp-button-footer-solid-box-shadow: none;
    --ia-dxp-button-footer-solid-color: var(--ia-color-grey-1);
    --ia-dxp-button-footer-solid-contrast: var(--primary-color);
    --ia-dxp-button-footer-solid-font-size: 14px;
    --ia-dxp-button-footer-solid-font-weight: 600;
    --ia-dxp-button-footer-solid-height: 28px;
    --ia-dxp-button-footer-solid-width: inherit;
    --ia-dxp-button-footer-solid-line-height: 16.1px; 
    --ia-dxp-button-footer-solid-padding: 4px 11px; 
    /* hover */
    --ia-dxp-button-footer-solid-hover-color: var(--light-color);
    --ia-dxp-button-footer-solid-hover-border: 1px solid var(--light-color);
    /* disabled */
    --ia-dxp-button-footer-solid-disabled-background-color: var(--ia-color-grey-1);
    --ia-dxp-button-footer-solid-disabled-color: var(--disabled-color);
    --ia-dxp-button-footer-solid-disabled-border: 1px solid var(--ia-color-grey-1);
    /* active, focus */
    --ia-dxp-button-footer-solid-active-color: var(--active-color);
    --ia-dxp-button-footer-solid-active-border: 1px solid var(--active-color);

    /* button footer-outline */
    --ia-dxp-button-footer-outline-border: 1px solid var(--primary-contrast-color);
    --ia-dxp-button-footer-outline-border-radius: var(--ia-dxp-button-footer-solid-border-radius);
    --ia-dxp-button-footer-outline-box-shadow: var(--ia-dxp-button-footer-solid-box-shadow);
    --ia-dxp-button-footer-outline-color: transparent;
    --ia-dxp-button-footer-outline-contrast: var(--primary-contrast-color);
    --ia-dxp-button-footer-outline-font-size: var(--ia-dxp-button-footer-solid-font-size);
    --ia-dxp-button-footer-outline-font-weight: var(--ia-dxp-button-footer-solid-font-weight);
    --ia-dxp-button-footer-outline-height: var(--ia-dxp-button-footer-solid-height);
    --ia-dxp-button-footer-outline-width: inherit;
    --ia-dxp-button-footer-outline-line-height: var(--ia-dxp-button-footer-solid-line-height); 
    --ia-dxp-button-footer-outline-padding: var(--ia-dxp-button-footer-solid-padding); 
    /* hover */
    --ia-dxp-button-footer-outline-hover-color: var(--ia-color-pear2);
    --ia-dxp-button-footer-outline-hover-border: 1px solid var(--ia-color-pear2);
    /* disabled */
    --ia-dxp-button-footer-outline-disabled-color: var(--disabled-color);
    --ia-dxp-button-footer-outline-disabled-border: 1px solid var(--disabled-color);
    /* active, focus */
    --ia-dxp-button-footer-outline-active-color: var(--ia-color-pear1);
    --ia-dxp-button-footer-outline-active-border: 1px solid var(--ia-color-pear1);
}

/* button tile */
:root {
    --ia-dxp-button-tile-border-width: 1px;
    --ia-dxp-button-tile-border-style: solid;
    --ia-dxp-button-tile-border-color: var(--primary-color);
    --ia-dxp-button-tile-border-radius: 4px;
    --ia-dxp-button-tile-color: var(--primary-color);
    --ia-dxp-button-tile-font-size: 14px;
    --ia-dxp-button-tile-font-weight: 600;
    --ia-dxp-button-tile-padding: 12px;

    --ia-dxp-button-tile-disabled-background: var(--disabled-color);
    --ia-dxp-button-tile-disabled-border-color: var(--disabled-color);
    --ia-dxp-button-tile-disabled-color: var(--primary-contrast-color);

    --ia-dxp-button-tile-hover-border-color: var(--light-color);
    --ia-dxp-button-tile-hover-color: var(--light-color);
}

/* card header*/
:root {
    --ia-dxp-card-header-icon-width: 32px;
    --ia-dxp-card-header-icon-height: auto;
    --ia-dxp-card-header-icon-container-width: 48px;
    --ia-dxp-card-header-icon-container-height: 48px;
    --ia-dxp-card-header-icon-color: var(--ia-color-elements-teal);
    --ia-dxp-card-header-flex-direction: column; 
    --ia-dxp-card-header-gap: 20px; 
    --ia-dxp-card-header-message-text-align: center;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-card-header-flex-direction: row;
        --ia-dxp-card-header-gap: 12px; 
        --ia-dxp-card-header-message-text-align: left;
    }
}

/* card */
:root {
    --ia-dxp-card-background-color: var(--primary-contrast-color);
    --ia-dxp-card-max-width: 560px;
    --ia-dxp-card-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
    --ia-dxp-card-separator-background-color: var(--ia-color-grey-3);
    --ia-dxp-card-separator-height: 1px;
    --ia-dxp-card-separator-margin: 24px -16px 36px -16px;
    --ia-dxp-card-container-default-padding: 24px 16px 36px 16px;
    --ia-dxp-card-container-no-header-padding: 36px 16px;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-card-container-default-padding: 24px 32px 36px 32px;
        --ia-dxp-card-container-no-header-padding: 36px 32px;
        --ia-dxp-card-separator-margin: 24px -32px 36px -32px;
    }
}

/* carousel */
:root {
    --ia-dxp-carousel-arrow-color: #fff6;
    --ia-dxp-carousel-arrow-padding: 0 8px;
    --ia-dxp-carousel-arrow-size: 8px;
    --ia-dxp-carousel-arrow-style-transition-duration: 250ms;
    --ia-dxp-carousel-arrow-hover-background-color: #0003;
    --ia-dxp-carousel-arrow-hover-color: var(--primary-contrast-color);

    --ia-dxp-carousel-controls-bottom: 8px;
    --ia-dxp-carousel-controls-left: 8px;
    --ia-dxp-carousel-controls-spacing: 4px;

    --ia-dxp-carousel-dot-border: 1px solid var(--primary-color);
    --ia-dxp-carousel-dot-border-radius: 50%;
    --ia-dxp-carousel-dot-size: 16px;
    --ia-dxp-carousel-dot-hover-border: 2px solid var(--light-color);
    --ia-dxp-carousel-dot-active-background-color: var(--primary-color);
    --ia-dxp-carousel-dot-active-hover-background-color: var(--light-color);

    --ia-dxp-carousel-playback-button-size: 24px;
    --ia-dxp-carousel-playback-button-color: var(--primary-color);
    --ia-dxp-carousel-playback-button-hover-color: var(--light-color);

    --ia-dxp-carousel-slide-transition-duration: 350ms;

    --ia-dxp-carousel-status-color: var(--ia-color-type-reversed);
    --ia-dxp-carousel-status-font-size: 10px;
    --ia-dxp-carousel-status-right: 0;
    --ia-dxp-carousel-status-padding: 5px;
    --ia-dxp-carousel-status-text-shadow: 1px 1px 1px #000000e6;
    --ia-dxp-carousel-status-top: 0;
}

/* datatable */
:root {
    --ia-dxp-datatable-action-icon-color: var(--light-color);
    --ia-dxp-datatable-action-icon-size: 28px;
    --ia-dxp-datatable-actionmenu-background-color: var(--primary-contrast-color);
    --ia-dxp-datatable-actionmenu-border-radius: 8px;
    --ia-dxp-datatable-actionmenu-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
    --ia-dxp-datatable-actionmenu-icon-size: 40px;
    --ia-dxp-datatable-actionmenu-padding: 12px 16px;
    --ia-dxp-datatable-actionmenu-title-color: #767676;
    --ia-dxp-datatable-actionmenu-active-background-color: var(--ia-color-blue-1);
    --ia-dxp-datatable-checkbox-color: var(--light-color);
    --ia-dxp-datatable-sort-active-color: var(--light-color);
}

/* form */
:root {
    --ia-dxp-form-column-spacing: 16px;
    --ia-dxp-form-row-spacing: 24px;
}

/* form column */
:root {
    --ia-dxp-form-column-label-text-color: var(--ia-color-type-main);
    --ia-dxp-form-column-label-font-family: var(--ia-font-opensans);
    --ia-dxp-form-column-label-font-size: 14px;
    --ia-dxp-form-column-label-font-stretch: normal;
    --ia-dxp-form-column-label-font-style: normal;
    --ia-dxp-form-column-label-line-height: 1.29;
    --ia-dxp-form-column-label-letter-spacing: normal;
    --ia-dxp-form-column-label-margin: 0 0 12px;
}

/* error */
:root {
    --ia-dxp-error-color: var(--error-color);
    --ia-dxp-error-icon-color: var(--error-color);
    --ia-dxp-error-caution-color: var(--caution-light-color);
    --ia-dxp-error-caution-icon-color: var(--caution-color);
    --ia-dxp-error-warning-color: var(--warning-color);
    --ia-dxp-error-warning-icon-color: var(--warning-color);

    --ia-dxp-error-inline-border: 1px solid var(--error-color);
    --ia-dxp-error-inline-background-color: var(--error-light-color);
    --ia-dxp-error-inline-color: var(--text-color);
    --ia-dxp-error-inline-icon-color: var(--error-color);
    --ia-dxp-error-inline-caution-border-color: var(--caution-color);
    --ia-dxp-error-inline-caution-background-color: var(--alert-color);
    --ia-dxp-error-inline-caution-color: var(--text-color);
    --ia-dxp-error-inline-caution-icon-color: var(--caution-color);
    --ia-dxp-error-inline-warning-border-color: var(--warning-color);
    --ia-dxp-error-inline-warning-background-color: var(--warning-light-color);
    --ia-dxp-error-inline-warning-color: var(--text-color);
    --ia-dxp-error-inline-warning-icon-color: var(--warning-color);

    --ia-dxp-error-retry-border: 1px solid var(--error-color);
    --ia-dxp-error-retry-background-color: var(--error-light-color);
    --ia-dxp-error-retry-color: var(--text-color);
    --ia-dxp-error-retry-icon-color: var(--error-color);
    --ia-dxp-error-retry-caution-border-color: var(--caution-color);
    --ia-dxp-error-retry-caution-background-color: var(--alert-color);
    --ia-dxp-error-retry-caution-color: var(--text-color);
    --ia-dxp-error-retry-caution-icon-color: var(--caution-color);
    --ia-dxp-error-retry-warning-border-color: var(--warning-color);
    --ia-dxp-error-retry-warning-background-color: var(--warning-light-color);
    --ia-dxp-error-retry-warning-color: var(--text-color);
    --ia-dxp-error-retry-warning-icon-color: var(--warning-color);
}

/* application layout */
:root {
    --ia-dxp-app-layout-padding: 0;
    --ia-dxp-app-layout-background-color: var(--gbi-blue-haze);
    --ia-dxp-app-layout-logo-width: 78px;
    --ia-dxp-app-layout-logo-height: 42px;
    --ia-dxp-app-layout-header-padding: 0px 16px;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-app-layout-header-padding: 0px 32px;
        --ia-dxp-app-layout-logo-width: 132px;
        --ia-dxp-app-layout-logo-height: 32px;
    }
}

/* form layout */
:root {
    --ia-dxp-form-layout-padding: 0;
    --ia-dxp-form-layout-background-color-1: var(--ia-color-blue-1);
    --ia-dxp-form-layout-background-color-2: var(--ia-color-babygreen-1);
}

/* input */
:root {
    --ia-dxp-input-width: 100%;
    --ia-dxp-input-height: 40px;
    --ia-dxp-input-box-sizing: border-box;
    --ia-dxp-input-border-style: solid;
    --ia-dxp-input-border-width: 1px;
    --ia-dxp-input-font-size: 14px;
    --ia-dxp-input-color: var(--text-color);
    --ia-dxp-input-background: rgb(255, 255, 255);
    --ia-dxp-input-appearance: none;
    --ia-dxp-input-outline: 0px;
    --ia-dxp-input-padding-top: 9px;
    --ia-dxp-input-padding-right: 9px;
    --ia-dxp-input-padding-bottom: 10px;
    --ia-dxp-input-padding-left: 9px;
    --ia-dxp-input-padding: var(--ia-dxp-input-padding-top) var(--ia-dxp-input-padding-right) var(--ia-dxp-input-padding-bottom) var(--ia-dxp-input-padding-left);
    --ia-dxp-input-border-radius: 4px;
    --ia-dxp-input-font-family: var(--font-family);
    --ia-dxp-input-font-weight: normal;
    --ia-dxp-input-line-height: 1.29;
    --ia-dxp-input-border-color: rgb(127, 127, 127);
    --ia-dxp-input-icon-color: var(--light-color);
    --ia-dxp-input-icon-neutral-color: #aeaeae;
    --ia-dxp-input-icon-clear-color: var(--ia-color-grey-5);
    --ia-dxp-input-icon-clear-hover-color: var(--ia-color-grey-6);
    --ia-dxp-input-hover-border-color: var(--light-color);
    --ia-dxp-input-active-border-color: var(--lighter-color);
    --ia-dxp-input-active-border-width: 2px;
    --ia-dxp-input-active-padding-top: 8px;
    --ia-dxp-input-active-padding-right: 8px;
    --ia-dxp-input-active-padding-bottom: 9px;
    --ia-dxp-input-active-padding-left: 8px;
    --ia-dxp-input-active-padding: var(--ia-dxp-input-active-padding-top) var(--ia-dxp-input-active-padding-right) var(--ia-dxp-input-active-padding-bottom) var(--ia-dxp-input-active-padding-left);
    --ia-dxp-input-unchecked-color: var(--ia-color-grey-5);
    --ia-dxp-input-checked-color: var(--light-color);
    --ia-dxp-input-disabled-background: rgb(239, 241, 244);
    --ia-dxp-input-disabled-color: #a4a4a4;
    --ia-dxp-input-disabled-check-color: var(--disabled-light-color);
    --ia-dxp-input-disabled-icon-color: var(--disabled-color);
    --ia-dxp-input-error-border-width: 2px;
    --ia-dxp-input-error-border-color: var(--error-color);
    --ia-dxp-input-error-padding-top: 8px;
    --ia-dxp-input-error-padding-right: 8px;
    --ia-dxp-input-error-padding-bottom: 9px;
    --ia-dxp-input-error-padding-left: 8px;
    --ia-dxp-input-error-padding: var(--ia-dxp-input-error-padding-top) var(--ia-dxp-input-error-padding-right) var(--ia-dxp-input-error-padding-bottom) var(--ia-dxp-input-error-padding-left);
    --ia-dxp-input-warning-border-width: 2px;
    --ia-dxp-input-warning-border-color: var(--warning-color);
    --ia-dxp-input-warning-padding-top: 8px;
    --ia-dxp-input-warning-padding-right: 8px;
    --ia-dxp-input-warning-padding-bottom: 9px;
    --ia-dxp-input-warning-padding-left: 8px;
    --ia-dxp-input-warning-padding: var(--ia-dxp-input-warning-padding-top) var(--ia-dxp-input-warning-padding-right) var(--ia-dxp-input-warning-padding-bottom) var(--ia-dxp-input-warning-padding-left);
}

/* input address manual */
:root {
    --ia-dxp-input-address-manual-form-border-color: var(--ia-color-elements-grey);
    --ia-dxp-input-address-manual-form-border-radius: 8px;
    --ia-dxp-input-address-manual-form-border-style: solid;
    --ia-dxp-input-address-manual-form-border-width: 1px;
    --ia-dxp-input-address-manual-form-padding: 24px 16px;
}

/* input date */
:root {
    --ia-dxp-input-date-action-color: var(--primary-color);
    --ia-dxp-input-date-action-hover-background-color: var(--ia-color-blue-1);
    --ia-dxp-input-date-action-hover-color: var(--light-color);
    --ia-dxp-input-date-background-color: var(--primary-contrast-color);
    --ia-dxp-input-date-border-color: var(--ia-color-elements-grey);
    --ia-dxp-input-date-options-disabled-background-color: transparent;
    --ia-dxp-input-date-options-disabled-color: #ccc;
    --ia-dxp-input-date-options-offmonth-color: rgba(27, 27, 27, 0.4);
    --ia-dxp-input-date-options-selected-background-color: var(--ia-color-blue-1);
    --ia-dxp-input-date-options-selected-border-color: var(--light-color);
    --ia-dxp-input-date-options-selected-color: var(--light-color);
}

/* input dropdown */
:root {
    --ia-dxp-input-dropdown-color: var(--text-color);
    --ia-dxp-input-dropdown-option-default-background: var(--ia-color-blue-2);
    --ia-dxp-input-dropdown-option-hover-background: var(--ia-color-blue-1);
    --ia-dxp-input-dropdown-option-hover-color: var(--light-color);
}

/* input checkbox */
:root {
    --ia-dxp-input-checkbox-button-color: var(--primary-color);
    --ia-dxp-input-checkbox-button-active-color: var(--lighter-color);
    --ia-dxp-input-checkbox-button-checked-background: var(--ia-color-blue-1);
    --ia-dxp-input-checkbox-button-hover-color: var(--light-color);
    --ia-dxp-input-checkbox-font-size: 16px;
    --ia-dxp-input-checkbox-line-height: 1.1;
}

/* input password */
:root {
    --ia-dxp-input-password-icon-color: var(--primary-color);
    --ia-dxp-input-password-icon-active-color: var(--lighter-color);
    --ia-dxp-input-password-icon-disabled-color: var(--ia-color-grey-5);
    --ia-dxp-input-password-icon-hover-color: var(--lightest-color);
}

/* input radio */
:root {
    --ia-dxp-input-radio-font-size: 16px;
    --ia-dxp-input-radio-line-height: 1.1;
}


/* input selection button */
:root {
    --ia-dxp-input-selection-button-background: var(--primary-contrast-color);
    --ia-dxp-input-selection-button-border: 1px solid var(--ia-color-elements-grey);
    --ia-dxp-input-selection-button-padding: 10px 12px 10px 14px;
    --ia-dxp-input-selection-button-checked-background: var(--ia-color-blue-1);
    --ia-dxp-input-selection-button-hover-border: 2px solid var(--light-color);
    --ia-dxp-input-selection-button-hover-color: var(--light-color);
    --ia-dxp-input-selection-button-hover-padding: 9px 11px 9px 13px;
    --ia-dxp-input-selection-button-active-border-color: var(--lighter-color);
    --ia-dxp-input-selection-button-active-color: var(--lighter-color);
    --ia-dxp-input-selection-button-focus-border: 2px solid var(--light-color);
    --ia-dxp-input-selection-button-focus-padding: 9px 11px 9px 13px;
    --ia-dxp-input-selection-button-focus-color: var(--light-color);
    --ia-dxp-input-selection-button-disabled-background: transparent;
    --ia-dxp-input-selection-button-disabled-border-color: var(--disabled-color);
}

/* input selection control */
:root {
    --ia-dxp-input-selection-control-background: var(--primary-contrast-color);
    --ia-dxp-input-selection-control-color: var(--ia-color-elements-grey);
    --ia-dxp-input-selection-control-margin: 8px;
    --ia-dxp-input-selection-control-disabled-background: transparent;
    --ia-dxp-input-selection-control-disabled-color: var(--disabled-color); 
    --ia-dxp-input-selection-radio-button-border-radius: 4px;
}

/* link and button with link variant */
:root {
    --ia-dxp-link-color: var(--light-color);
    --ia-dxp-link-font-family: var(--font-family);
    --ia-dxp-link-font-size: 14px;
    --ia-dxp-link-font-weight: 600;
    --ia-dxp-link-line-height: 1.29;
    --ia-dxp-link-text-decoration: none;
    --ia-dxp-link-hover-color: var(--light-color);
    --ia-dxp-link-hover-decoration: underline;
    --ia-dxp-link-svg-width: 18px;
    --ia-dxp-link-svg-height: 18px;
    --ia-dxp-link-svg-margin: 0 3px;
    --ia-dxp-link-active-color: var(--active-color);
    --ia-dxp-link-active-decoration: underline;
}

/* input loader */
:root {
    --ia-dxp-loader-dot-color: #878889;
    --ia-dxp-loader-spinning-brand-background: var(--primary-contrast-color);
    --ia-dxp-loader-spinning-brand-color: #bcbcbc;
    --ia-dxp-loader-spinning-brand-contrast-color: var(--primary-color);
}

/* message */
:root {
    --ia-dxp-message-icon-color: var(--text-color);
    --ia-dxp-message-alert-border-color: var(--alert-color);
    --ia-dxp-message-alert-color: var(--alert-color);
    --ia-dxp-message-error-border-color: var(--error-color);
    --ia-dxp-message-error-color: var(--error-light-color);
    --ia-dxp-message-error-icon-color: var(--error-color);
    --ia-dxp-message-info-border-color: var(--light-color);
    --ia-dxp-message-info-color: var(--ia-color-blue-1);
    --ia-dxp-message-info-icon-color: var(--light-color);
    --ia-dxp-message-success-border-color: var(--success-color);
    --ia-dxp-message-success-color: var(--success-light-color);
    --ia-dxp-message-success-icon-color: var(--success-color);
    --ia-dxp-message-warning-border-color: var(--warning-color);
    --ia-dxp-message-warning-color: var(--warning-light-color);
    --ia-dxp-message-warning-icon-color: var(--warning-color);
    --ia-dxp-message-flex-direction: column;
    --ia-dxp-message-align-items: center;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-message-flex-direction: row;
        --ia-dxp-message-align-items: flex-start;
    }
}

/* modal */
:root {
    --ia-dxp-modal-button-close-color: var(--primary-contrast-color);
    --ia-dxp-modal-button-close-hover-color: var(--lighter-color);
    --ia-dxp-modal-content-color: rgb(255, 255, 255);
    --ia-dxp-modal-content-padding: 48px 32px;
    --ia-dxp-modal-icon-color: var(--text-color);
    --ia-dxp-modal-title-contrast: var(--text-color);
    --ia-dxp-modal-info-icon-color: var(--light-color);
    --ia-dxp-modal-warning-icon-color: var(--warning-color);
    --ia-dxp-modal-error-icon-color: var(--error-color);
}

/* paragraph */
:root {
    --ia-dxp-paragraph-color: var(--text-color);
    --ia-dxp-paragraph-font-family: var(--font-family);
    --ia-dxp-paragraph-font-size: 14px;
    --ia-dxp-paragraph-font-weight: normal;
    --ia-dxp-paragraph-line-height: 1.1;
    --ia-dxp-paragraph-margin: 8px 0;
    --ia-dxp-paragraph-strong-font-family: var(--font-family);
    --ia-dxp-paragraph-strong-font-size: 14px;
    --ia-dxp-paragraph-strong-font-weight: 600;
    --ia-dxp-paragraph-strong-line-height: 1.29;
}

/* password requirements */
:root {
    --ia-dxp-password-requirement-text-color: var(--text-color);
    --ia-dxp-password-requirement-font-family: var(--font-family);
    --ia-dxp-password-requirement-font-size: 14px;
}
/* progress-bar */
:root {
    --ia-dxp-progress-bar-stepped-margin: 0, 0, 10px, 0;
    --ia-dxp-progress-bar-stepped-separator-inactive-color: var(--ia-color-elements-grey);
    --ia-dxp-progress-bar-stepped-separator-active-color: var(--primary-color);
    --ia-dxp-progress-bar-stepped-circle-active-color: var(--primary-color);
    --ia-dxp-progress-bar-stepped-circle-inactive-border-color: var(--ia-color-elements-grey);
    --ia-dxp-progress-bar-stepped-circle-text-active-color: var(--primary-contrast-color);
    --ia-dxp-progress-bar-stepped-circle-text-inactive-color: var(--ia-color-elements-grey);
    --ia-dxp-progress-bar-stepped-name-text-color: var(--ia-color-elements-grey);
}

/* side nav item */
:root {
    --ia-dxp-side-nav-item-background-color: var(--ia-color-type-reversed);
    --ia-dxp-side-nav-item-text-color: var(--ia-color-type-main);
    --ia-dxp-side-nav-item-font-family: var(--ia-font-opensans);
    --ia-dxp-side-nav-item-font-size: 14px;
    --ia-dxp-side-nav-item-font-weight: 600;
    --ia-dxp-side-nav-item-font-stretch: normal;
    --ia-dxp-side-nav-item-font-style: normal;
    --ia-dxp-side-nav-item-line-height: 1.29;
    --ia-dxp-side-nav-item-letter-spacing: normal;
    --ia-dxp-side-nav-item-padding-y: 15px;
    --ia-dxp-side-nav-item-padding-x: 16px;
    --ia-dxp-side-nav-item-border-bottom: 1px solid var(--ia-color-grey-3);

    --ia-dxp-side-nav-item-hover-background-color: var(--ia-color-blue-1);
    --ia-dxp-side-nav-item-hover-text-color: var(--light-color);

    --ia-dxp-side-nav-item-active-background-color: var(--ia-color-blue-2);
    --ia-dxp-side-nav-item-active-text-color: var(--active-color);

    --ia-dxp-side-nav-item-selected-border-color: var(--light-color);
    --ia-dxp-side-nav-item-selected-hover-border-color: var(--light-color);
    --ia-dxp-side-nav-item-selected-active-border-color: var(--active-color);

    --ia-dxp-side-nav-item-disabled-background-color: var(--ia-color-type-reversed);
    --ia-dxp-side-nav-item-disabled-color: var(--ia-color-grey-4);
}

/* side nav section */
:root {
    --ia-dxp-side-nav-section-child-selected-text-color: var(--light-color);
}

/* site footer */
:root {
    --ia-dxp-site-footer-padding: 60px 16px;
    --ia-dxp-site-footer-background-color: var(--ia-color-type-reversed);
    --ia-dxp-site-footer-footer-links-container-flex-direction: column;
    --ia-dxp-site-footer-footer-links-container-justify-content: initial;
    --ia-dxp-site-footer-footer-links-container-gap: 16px;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-site-footer-padding: 60px 32px;
        --ia-dxp-site-footer-footer-links-container-flex-direction: row;
        --ia-dxp-site-footer-footer-links-container-justify-content: space-between;
        --ia-dxp-site-footer-footer-links-container-gap: 32px;
    }
}

/* site header */
:root {
    --ia-dxp-site-header-gap: 8px;
    --ia-dxp-site-header-background-color: var(--ia-color-type-reversed);
    --ia-dxp-site-header-padding: 16px;
}
@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-site-header-height: 82px;
        --ia-dxp-site-header-padding: 16px 32px;
    }
}

/* skeleton */
:root {
    --ia-dxp-skeleton-border-radius: 4px;
    --ia-dxp-skeleton-width: 120px;
    --ia-dxp-skeleton-height: 40px;
}

/* status */
:root {
    --ia-dxp-status-error-icon-color: var(--error-color);
    --ia-dxp-status-inactive-color: var(--ia-color-grey-5);
    --ia-dxp-status-inactive-icon-color: var(--ia-color-grey-5);
    --ia-dxp-status-incomplete-icon-color: var(--ia-color-grey-5);
    --ia-dxp-status-progress-icon-color: var(--success-color);
    --ia-dxp-status-pending-icon-color: var(--ia-color-elements-grey);
    --ia-dxp-status-success-icon-color: var(--success-color);
    --ia-dxp-status-waiting-icon-color: var(--primary-color);
    --ia-dxp-status-warning-icon-color: var(--warning-color);
}

/* table cell */
:root {
    --ia-dxp-table-cell-padding: 11px 12px;
    --ia-dxp-table-cell-text-align: left;

    --ia-dxp-table-cell-font-family: var(--ia-font-opensans);
    --ia-dxp-table-cell-font-size: 14px;
    --ia-dxp-table-cell-font-weight: normal;
    --ia-dxp-table-cell-font-stretch: normal;
    --ia-dxp-table-cell-font-style: normal;
    --ia-dxp-table-cell-line-height: 1.29;
    --ia-dxp-table-cell-letter-spacing: normal;
    --ia-dxp-table-cell-text-color: var(--ia-color-type-main);
}

/* table head */
:root {
    --ia-dxp-table-head-background-color: var(--ia-color-grey-2);
    --ia-dxp-table-head-divider-color: var(--ia-color-type-main);
    --ia-dxp-table-head-divider-height: 1px;
    --ia-dxp-table-head-divider-style: solid;

    --ia-dxp-table-head-cell-text-align: left;
    --ia-dxp-table-head-cell-font-family: var(--ia-font-opensans);
    --ia-dxp-table-head-cell-font-size: 14px;
    --ia-dxp-table-head-cell-font-weight: bold;
    --ia-dxp-table-head-cell-font-stretch: normal;
    --ia-dxp-table-head-cell-font-style: normal;
    --ia-dxp-table-head-cell-line-height: 1.29;
    --ia-dxp-table-head-cell-letter-spacing: normal;
    --ia-dxp-table-head-cell-text-color: var(--ia-color-type-main);

    --ia-dxp-table-head-row-border-color: transparent;
    --ia-dxp-table-head-row-border-style: none;
    --ia-dxp-table-head-row-border-width: 0;
}

/* table row */
:root {
    --ia-dxp-table-row-align-items: start;
    --ia-dxp-table-row-border-color: var(--ia-color-grey-2);
    --ia-dxp-table-row-border-style: solid;
    --ia-dxp-table-row-border-width: 0 0 1px 0;
}

/* tile */
:root {
    --ia-dxp-tile-container-default-padding: 36px 16px;
}

@media only screen and (min-width: 767px) {
    :root {
        --ia-dxp-tile-container-default-padding: 36px 32px;
    }
}

/* tips */
:root {
    --ia-dxp-tips-background: var(--primary-contrast-color);
    --ia-dxp-tips-border-color: var(--disabled-color);
    --ia-dxp-tips-text-color: var(--text-color);
    --ia-dxp-tips-error-icon-color: var(--error-color);
    --ia-dxp-tips-info-icon-color: var(--light-color);
    --ia-dxp-tips-warning-icon-color: var(--warning-color);
}

/* title */
:root {
    --ia-dxp-title-t0-color: var(--primary-color);
    --ia-dxp-title-t0-font-family: var(--title-font-family);
    --ia-dxp-title-t0-font-size: 35px;
    --ia-dxp-title-t0-font-weight: 900;
    --ia-dxp-title-t0-line-height: 1.1;
    --ia-dxp-title-t0-margin: 36px 0;
    --ia-dxp-title-t0-text-transform: uppercase;
    --ia-dxp-title-t0-font-variant-ligatures: normal;

    --ia-dxp-title-t1-color: var(--text-color);
    --ia-dxp-title-t1-font-family: var(--title-font-family);
    --ia-dxp-title-t1-font-size: 32px;
    --ia-dxp-title-t1-font-weight: 700;
    --ia-dxp-title-t1-line-height: 1.1;
    --ia-dxp-title-t1-margin: 32px 0;
    --ia-dxp-title-t1-text-transform: none;

    --ia-dxp-title-t2-color: var(--text-color);
    --ia-dxp-title-t2-font-family: var(--title-font-family);
    --ia-dxp-title-t2-font-size: 24px;
    --ia-dxp-title-t2-font-weight: 700;
    --ia-dxp-title-t2-line-height: 1.1;
    --ia-dxp-title-t2-margin: 28px 0;
    --ia-dxp-title-t2-text-transform: none;

    --ia-dxp-title-t3-color: var(--text-color);
    --ia-dxp-title-t3-font-family: var(--title-font-family);
    --ia-dxp-title-t3-font-size: 21px;
    --ia-dxp-title-t3-font-weight: 700;
    --ia-dxp-title-t3-line-height: 1.1;
    --ia-dxp-title-t3-margin: 24px 0;
    --ia-dxp-title-t3-text-transform: none;

    --ia-dxp-title-t4-color: var(--text-color);
    --ia-dxp-title-t4-font-family: var(--font-family);
    --ia-dxp-title-t4-font-size: 17px;
    --ia-dxp-title-t4-font-weight: 700;
    --ia-dxp-title-t4-line-height: 1.1;
    --ia-dxp-title-t4-margin: 20px 0;
    --ia-dxp-title-t4-text-transform: none;

    --ia-dxp-title-t5-color: var(--text-color);
    --ia-dxp-title-t5-font-family: var(--font-family);
    --ia-dxp-title-t5-font-size: 14px;
    --ia-dxp-title-t5-font-weight: 700;
    --ia-dxp-title-t5-line-height: 1.1;
    --ia-dxp-title-t5-margin: 16px 0;
    --ia-dxp-title-t5-text-transform: none;
}

/* transactionProgress */
:root {
    --ia-dxp-transaction-progress-progress-bar-height: 6px;
    --ia-dxp-transaction-progress-progress-bar-border-radius: 5px;
    --ia-dxp-transaction-progress-progress-bar-background-color: var(--ia-color-grey-6);
    --ia-dxp-transaction-progress-progress-bar-completed-background-color: var(--primary-color);
}