:root {
  /* custom CSS variables for Telarus branding */
  --tel-color-navy: rgb(13,36,89);
  --tel-color-maroon: rgb(138,0,65);
  --tel-color-hunter: rgb(3,107,105);
  --tel-body-text: rgb(24, 24, 24);
  
  /* fix headerbar menu item padding */
  --dxp-c-nav-bar-menu-item-padding-top: var(--slds-g-spacing-2);
  --dxp-c-nav-bar-menu-item-padding-bottom: var(--slds-g-spacing-2);
  --dxp-c-nav-bar-menu-item-padding-right: var(--slds-g-spacing-3);
  --dxp-c-nav-bar-menu-item-padding-left: var(--slds-g-spacing-3);

  /* override colors to match branding */
  --slds-g-color-error-1: var(--tel-color-maroon);
  --slds-g-color-error-container-1: var(--tel-color-maroon);
  --slds-g-color-error-container-2: rgb(92,0,43);
  
  --dxp-g-destructive: var(--slds-g-color-error-container-1);
  --dxp-g-destructive-1: var(--slds-g-color-error-container-2);
  
  --slds-g-color-success-1: var(--tel-color-hunter);
  --slds-g-color-success-container-1: var(--tel-color-hunter);
  --slds-g-color-success-container-2: rgb(2,60,58);

  --dxp-g-success: var(--tel-color-hunter);
  --dxp-g-success-1: var(--slds-g-color-success-container-2);
  --dxp-g-success-contrast: var(--slds-g-color-on-success-1);
  --dxp-g-success-contrast-1: var(--slds-g-color-on-success-1);
  
  --slds-g-color-on-surface-1: var(--tel-body-text);
  
  --avonni-button-outline-brand-color-border: var(--dxp-g-brand);
  
  /* avonni chip brand */
  --avonni-chip-brand-color-background: #fff;
  --avonni-chip-brand-color-border: var(--dxp-g-brand);
  --avonni-chip-brand-text-color: var(--dxp-g-brand);
  
  /* avonni button padding */
  --avdxp-button-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avdxp-button-spacing-block-end: var(--dxp-s-button-padding-block-end);
  
  --avonni-button-brand-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avonni-button-brand-spacing-block-end: var(--dxp-s-button-padding-block-end);

  --avonni-button-outline-brand-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avonni-button-outline-brand-spacing-block-end: var(--dxp-s-button-padding-block-end);

  --avonni-button-neutral-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avonni-button-neutral-spacing-block-end: var(--dxp-s-button-padding-block-end);
  
  --avonni-button-success-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avonni-button-success-spacing-block-end: var(--dxp-s-button-padding-block-end);

  --avonni-button-destructive-spacing-block-start: var(--dxp-s-button-padding-block-start);
  --avonni-button-destructive-spacing-block-end: var(--dxp-s-button-padding-block-end);
}

/* custom classes */
.telarus-header {
  background-color: var(--slds-g-color-neutral-base-100);
}

.telarus-footer {
  background-color: var(--tel-color-navy);
}

.card-container {
  border-radius: var(--slds-g-radius-border-2);
}

  .card-container * {
    border-radius: inherit;
  }

.tel-container {
  margin: var(--slds-g-spacing-2) 0 var(--slds-g-spacing-4);
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
  background-color: var(--slds-g-color-surface-container-2);
  border-radius: var(--slds-g-radius-border-2);
}

  .tel-container > * { 
    margin: 0 !important;
  }

.tel-header_error {
  margin-top: var(--dxp-g-spacing-xlarge);
}
  .tel-header_error > * {
    color: var(--dxp-g-destructive) !important;
    text-align: center;
  }
/* /custom classes */


/* override modal close button */
.slds-modal__container > .slds-modal__close .slds-button {
  --slds-c-button-color-background: var(--slds-g-color-neutral-base-100);
}

.slds-modal__container > .slds-modal__close .slds-button.slds-button_icon {
  color: var(--dxp-g-brand, var(--dxp-g-neutral-3));
  line-height: 0;
  padding: 0;
}

/* override modal footer/navigationBar padding, margin, background-color */
.slds-card__footer.navigationBar {
  padding-top: var(--slds-g-spacing-4) !important;
  margin: 0 0 calc(var(--slds-g-spacing-1) * -1) !important;
  padding-bottom: var(--slds-g-spacing-4) !important; /* to compensate for negative margin */
  background-color: var(--slds-g-color-surface-container-2);
}

/* heading overrides for flow runtime screens */
.flowruntime-section-column h1,
.flowruntime-column h1 { /* dxp-text-heading-extra-large */
  font-size: var(--dxp-s-text-heading-extra-large-font-size, var(--dxp-g-font-size-9));
  font-style: var(--dxp-s-text-heading-extra-large-font-style);
  font-family: var(--dxp-s-text-heading-extra-large-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
  text-transform: var(--dxp-s-text-heading-extra-large-text-transform);
  line-height: var(--dxp-s-text-heading-extra-large-line-height);
  letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-extra-large-text-shadow);
  text-decoration: var(--dxp-s-text-heading-extra-large-text-decoration);
}
.flowruntime-section-column h1:not([class*="slds-text-color"]),
.flowruntime-column h1:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-extra-large-color, var(--dxp-g-root-contrast));
}

.flowruntime-section-column h2,
.flowruntime-column h2 { /* dxp-text-heading-large */
  font-size: var(--dxp-s-text-heading-large-font-size, var(--dxp-g-font-size-9));
  font-style: var(--dxp-s-text-heading-large-font-style);
  font-family: var(--dxp-s-text-heading-large-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-large-font-weight);
  text-transform: var(--dxp-s-text-heading-large-text-transform);
  line-height: var(--dxp-s-text-heading-large-line-height);
  letter-spacing: var(--dxp-s-text-heading-large-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-large-text-shadow);
  text-decoration: var(--dxp-s-text-heading-large-text-decoration);
}
.flowruntime-section-column h2:not([class*="slds-text-color"]),
.flowruntime-column h2:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-large-color, var(--dxp-g-root-contrast));
}

.flowruntime-section-column h3,
.flowruntime-column h3 { /* dxp-text-heading-medium */
  font-size: var(--dxp-s-text-heading-medium-font-size, var(--dxp-g-font-size-7));
  font-style: var(--dxp-s-text-heading-medium-font-style);
  font-family: var(--dxp-s-text-heading-medium-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-medium-font-weight);
  text-transform: var(--dxp-s-text-heading-medium-text-transform);
  line-height: var(--dxp-s-text-heading-medium-line-height);
  letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-medium-text-shadow);
  text-decoration: var(--dxp-s-text-heading-medium-text-decoration);
}
.flowruntime-section-column h3:not([class*="slds-text-color"]),
.flowruntime-column h3:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-medium-color, var(--dxp-g-root-contrast));
}

.flowruntime-section-column h4,
.flowruntime-column h4 { /* dxp-text-heading-small */
  font-size: var(--dxp-s-text-heading-small-font-size, var(--dxp-g-font-size-5));
  font-style: var(--dxp-s-text-heading-small-font-style);
  font-family: var(--dxp-s-text-heading-small-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-small-font-weight);
  text-transform: var(--dxp-s-text-heading-small-text-transform);
  line-height: var(--dxp-s-text-heading-small-line-height);
  letter-spacing: var(--dxp-s-text-heading-small-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-small-text-shadow);
  text-decoration: var(--dxp-s-text-heading-small-text-decoration);
}
.flowruntime-section-column h4:not([class*="slds-text-color"]),
.flowruntime-column h4:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-small-color, var(--dxp-g-root-contrast));
}

.flowruntime-section-column h5,
.flowruntime-column h5 { /* dxp-text-heading-xsmall */
  font-size: var(--dxp-s-text-heading-extra-small-font-size, var(--dxp-g-font-size-3));
  font-style: var(--dxp-s-text-heading-extra-small-font-style);
  font-family: var(--dxp-s-text-heading-extra-small-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-extra-small-font-weight);
  text-transform: var(--dxp-s-text-heading-extra-small-text-transform);
  line-height: var(--dxp-s-text-heading-extra-small-line-height);
  letter-spacing: var(--dxp-s-text-heading-extra-small-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-extra-small-text-shadow);
  text-decoration: var(--dxp-s-text-heading-extra-small-text-decoration);
}
.flowruntime-section-column h5:not([class*="slds-text-color"]),
.flowruntime-column h5:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-extra-small-color, var(--dxp-g-root-contrast));
}

.flowruntime-section-column h6,
.flowruntime-column h6 { /* dxp-text-heading-xxsmall */
  font-size: var(--dxp-s-text-heading-extra-extra-small-font-size, var(--dxp-g-font-size-1));
  font-style: var(--dxp-s-text-heading-extra-extra-small-font-style);
  font-family: var(--dxp-s-text-heading-extra-extra-small-font-family, var(--dxp-g-heading-font-family));
  font-weight: var(--dxp-s-text-heading-extra-extra-small-font-weight);
  text-transform: var(--dxp-s-text-heading-extra-extra-small-text-transform);
  line-height: var(--dxp-s-text-heading-extra-extra-small-line-height);
  letter-spacing: var(--dxp-s-text-heading-extra-extra-small-letter-spacing);
  text-shadow: var(--dxp-s-text-heading-extra-extra-small-text-shadow);
  text-decoration: var(--dxp-s-text-heading-extra-extra-small-text-decoration);
}
/* allow slds color class to override color */
.flowruntime-section-column h6:not([class*="slds-text-color"]),
.flowruntime-column h6:not([class*="slds-text-color"]) {
  color: var(--dxp-s-text-heading-extra-extra-small-color, var(--dxp-g-root-contrast));
}

/* override Avonni chip overrides */
.avonni-chip {
  --avonni-chip-radius-border: 5rem;
}

.avonni-chip__chip-label {
  margin-right: .25rem;
}

/* hide row number column in data table */
.row-number_is-hidden thead > tr > th:first-child {
  width: 0px !important;
}