:root {
  /** Use --dxp-g to override global styles **/
  --dxp-g-heading-font-family: 'neulis-sans', 'Lato', sans-serif;
  --dxp-g-root-font-family: 'neulis-sans', 'Lato', sans-serif;

  --dxp-g-font-size-9: 2.5rem;
  --dxp-g-font-size-8: 2.25rem;
  --dxp-g-font-size-7: 2rem;
  --dxp-g-font-size-6: 1.75rem;
  --dxp-g-font-size-5: 1.625rem;
  --dxp-g-font-size-4: 1.25rem;
  --dxp-g-font-size-3: 1rem;
  --dxp-g-font-size-2: 0.875rem;
  --dxp-g-font-size-1: 0.75rem;

  --dxp-g-brand: none;

  /** Use --sds-c to override standard component styles **/
  --sds-c-modal-text-color: var(--color-gray-900);
  --sds-c-modal-color-border: var(--color-teal-200);
  --sds-c-modal-header-color-background: var(--color-white);
  --sds-c-modal-content-color-background: var(--color-white);
  --sds-c-modal-footer-color-background: var(--color-white);
  --sds-c-modal-radius-border: var(--border-radius);
  --sds-c-modal-heading-font-weight: var(--font-weight-h4);
  --sds-c-modal-heading-font-size: var(--font-size-h4);
  --sds-c-modal-heading-line-height: var(--line-height-h4);
  --sds-c-modal-header-spacing-inline-start: 5rem;
  --sds-c-modal-header-spacing-inline-end: 5rem;
  --sds-c-modal-header-spacing-block-start: 1.75rem;
  --sds-c-modal-header-spacing-block-end: 1.75rem;
  --sds-c-modal-footer-spacing-inline-start: 2rem;
  --sds-c-modal-footer-spacing-inline-end: 2rem;
  --sds-c-modal-footer-spacing-block-start: 1.25rem;
  --sds-c-modal-footer-spacing-block-end: 1.25rem;

  /* workaround to apply styles to "neutral" variant of lightning-button 
     to be removed when Salesforce adds relevant variables to Experience Builder */
  --sds-c-button-text-color: var(--color-navi-blue);
  --sds-c-button-text-color-hover: var(--color-white);
  --sds-c-button-text-color-active: var(--color-white);
  --sds-c-button-neutral-color-background: var(--color-white);
  --sds-c-button-neutral-color-background-hover: var(--color-navi-blue);
  --sds-c-button-neutral-color-background-active: var(--color-teal-300);
  --sds-c-button-neutral-color-border: var(--color-navi-blue);
  --sds-c-button-neutral-color-border-hover: var(--color-navi-blue);
  --sds-c-button-neutral-color-border-active: var(--color-navi-blue);

  /** Use --c to override custom component styles **/
  --c-modal-header-font-family: var(--font-family-h4);

  --c-modal-content-spacing-inline-start: 2rem;
  --c-modal-content-spacing-inline-end: 2rem;
  --c-modal-content-spacing-block-start: 1.5rem;
  --c-modal-content-spacing-block-end: 1.5rem;

  --c-notification-background: var(--color-teal-100);
  --c-notification-spacing-inline-start: 1.5rem;
  --c-notification-spacing-inline-end: 1.5rem;
  --c-notification-spacing-block-start: 1.25rem;
  --c-notification-spacing-block-end: 1.25rem;

  --c-datatable-row-border: 1px solid var(--color-teal-200);
  --c-datatable-row-height: 5rem;
  --c-datatable-cell-spacing-inline-start: .5rem;
  --c-datatable-cell-spacing-inline-end: .5rem;
  --c-datatable-head-font-family: var(--font-family-large);
  --c-datatable-head-font-size: var(--font-size-large);
  --c-datatable-head-font-weight: var(--font-weight-bold);
  --c-datatable-body-font-family: var(--font-family-large);
  --c-datatable-body-font-size: var(--font-size-large);
  --c-datatable-body-font-weight: var(--font-weight-semibold);
  --c-datatable-empty-message-color: var(--color-gray-500);

  --c-card-border: 1px solid var(--color-teal-200);
  --c-card-border-radius: var(--border-radius);
  --c-card-background-color: var(--color-white);
  --c-card-shadow: var(--shadow-base);

  --c-case-card-border: 1px solid var(--color-teal-200);
  --c-case-card-separator-color: var(--color-teal-100);
  --c-case-card-selection-color: var(--color-teal-400);
  --c-case-card-tort-icon-color: var(--color-teal-100);

  --c-expandable-text-icon-color: var(--color-teal-400);

  --c-icon-color: var(--color-teal-400);

  --c-toggle-background-color: var(--color-gray-200);
  --c-toggle-background-color-active: var(--color-teal-400);
  --c-toggle-color: var(--color-white);

  --c-steps-circular-icon-border: 1px solid var(--color-gray-200);
  --c-steps-circular-icon-background-color: var(--color-white);
  --c-steps-color-completed-default: var(--color-teal-300);
  --c-steps-color-completed: var(--color-teal-400);
  --c-steps-color-completed-1: var(--c-steps-color-completed-default);
  --c-steps-color-completed-2: var(--c-steps-color-completed-default);
  --c-steps-color-completed-3: var(--c-steps-color-completed-default);
  --c-steps-color-completed-4: var(--c-steps-color-completed-default);
  --c-steps-color-completed-5: var(--c-steps-color-completed-default);
  --c-steps-text-color-completed-default: var(--color-white);
  --c-steps-description-background-color: var(--color-teal-100);

  /** Define custom variables **/
  --color-white: #FFFFFF;
  --color-black: #041322;

  --color-navi-blue: #052C3F;
  --color-blue-300: #0A587E;
  --color-teal-400: #359C92;
  --color-blue-200: #8FFFEC;
  --color-light-blue-100: #F0F8FB;
  --color-light-blue-200: #D7EFF7;
  --color-light-blue-300: #A7DAE8;
  --color-teal-100: #EBF5F4;
  --color-teal-200: #C2E2DF;
  --color-teal-300: #86C4BE;
  --color-blue-green-100: #E6F1F3;
  --color-blue-green-200: #38A7B9;
  --color-blue-green-300: #027587;

  --color-gray-900: #111928;
  --color-gray-800: #1F2A37;
  --color-gray-700: #333F4E;
  --color-gray-600: #585E6B;
  --color-gray-500: #6B7280;
  --color-gray-400: #AAACAF;
  --color-gray-300: #D3D5D8;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #EFF0F2;
  --color-gray-50: #F9FAFB;
  --color-white: #FFF;

  --color-destructive: #D93C66;
  --color-destructive-background: #FFEBF0;

  --font-family-h1: var(--dxp-s-text-heading-extra-large-font-family, var(--dxp-g-heading-font-family));
  --font-family-h2: var(--dxp-s-text-heading-large-font-family, var(--dxp-g-heading-font-family));
  --font-family-h3: var(--dxp-s-text-heading-medium-font-family, var(--dxp-g-heading-font-family));
  --font-family-h4: var(--dxp-s-text-heading-small-font-family, var(--dxp-g-heading-font-family));
  --font-family-h5: var(--dxp-g-heading-font-family);
  --font-family-large: var(--dxp-s-body-font-family, var(--dxp-g-root-font-family));
  --font-family-base: var(--dxp-s-body-small-font-family, var(--dxp-g-root-font-family));
  --font-family-small: var(--dxp-g-root-font-family);
  --font-family-xsmall: var(--dxp-g-root-font-family);

  --font-size-h1: var(--dxp-g-font-size-9);
  --font-size-h2: var(--dxp-g-font-size-8);
  --font-size-h3: var(--dxp-g-font-size-7);
  --font-size-h4: var(--dxp-g-font-size-6);
  --font-size-h5: var(--dxp-g-font-size-5);
  --font-size-large: var(--dxp-g-font-size-4);
  --font-size-base: var(--dxp-g-font-size-3);
  --font-size-small: var(--dxp-g-font-size-2);
  --font-size-xsmall: var(--dxp-g-font-size-1);

  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 400;

  --font-weight-h1: var(--dxp-s-text-heading-extra-large-font-weight, var(--font-weight-extrabold));
  --font-weight-h2: var(--dxp-s-text-heading-large-font-weight, var(--font-weight-extrabold));
  --font-weight-h3: var(--dxp-s-text-heading-medium-font-weight, var(--font-weight-extrabold));
  --font-weight-h4: var(--dxp-s-text-heading-small-font-weight, var(--font-weight-bold));
  --font-weight-h5: 600;
  --font-weight-large: var(--font-weight-semibold);
  --font-weight-base: var(--dxp-s-body-font-weight, var(--font-weight-semibold));
  --font-weight-small: var(--dxp-s-body-small-font-weight, 300);
  --font-weight-xsmall: 300;

  --line-height-h1: var(--dxp-s-text-heading-extra-large-line-height, 3rem);
  --line-height-h2: var(--dxp-s-text-heading-large-line-height, 2.75rem);
  --line-height-h3: var(--dxp-s-text-heading-medium-line-height, 2.5rem);
  --line-height-h4: var(--dxp-s-text-heading-small-line-height, 2.25rem);
  --line-height-h5: 2rem;
  --line-height-large: 1.75rem;
  --line-height-base: var(--dxp-s-body-line-height, 1.5rem);
  --line-height-small: var(--dxp-s-body-small-line-height, 1.25rem);
  --line-height-xsmall: 1rem;

  --border-radius: 0.5rem;

  --shadow-color-primary: #11111A0D;
  --shadow-color-secondary: #11111A1A;
  --shadow-large: 0px 2px 6px 0px var(--shadow-color-primary), 0px 8px 16px 0px var(--shadow-color-secondary);
  --shadow-base: 0px 2px 6px 0px var(--shadow-color-primary), 0px 4px 12px 0px var(--shadow-color-secondary);
  --shadow-small: 0px 2px 3px 0px var(--shadow-color-primary), 0px 1px 2px 0px var(--shadow-color-secondary);

  --c-stencil-color-light: var(--color-gray-100);
  --c-stencil-color-dark: var(--color-gray-300);

  --dropdown-padding: 10px 20px;
  --dropdown-background: var(--dxp-s-dropdown-color-background, var(--dxp-g-root));
  --dropdown-border: 1px solid var(--dxp-s-dropdown-color-border, var(--dxp-g-neutral));
  --dropdown-border-radius: var(--border-radius);
  --dropdown-border-focus: 2px solid var(--color-teal-400);

  --dropdown-list-padding: 0.25rem;
  --dropdown-list-background: var(--dropdown-background);
  --dropdown-list-border: var(--dropdown-border);
  --dropdown-list-border-radius: var(--dropdown-border-radius);

  --dropdown-option-color: var(--dxp-s-dropdown-text-color, var(--dxp-g-root-contrast));
  --dropdown-option-background-active: var(--dxp-s-dropdown-color-background-hover, var(--dxp-g-neutral));
  --dropdown-option-background-hover: var(--dropdown-option-background-active);
  --dropdown-option-border-radius: var(--dropdown-border-radius);
}

html,
body {
  height: 100%;
}

html {
  background: var(--color-white);
}

body {
  margin: 0;
}

.text-h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
}

.text-h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
}

.text-h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
}

.text-h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}

.text-h5,
.dxp-text-h5 h5 {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
}

.dxp-text-h5 h5 {
  --dxp-c-text-block-font-weight: var(--font-weight-h5);
}

.text-large,
.dxp-text-large p {
  font-family: var(--font-family-large);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-large);
  line-height: var(--line-height-large);
}

.dxp-text-large p {
  --dxp-c-text-block-font-weight: var(--font-weight-large);
}

.text-base {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
}

.text-small {
  font-family: var(--font-family-small);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-small);
  line-height: var(--line-height-small);
}

.text-xsmall,
.dxp-text-xsmall p {
  font-family: var(--font-family-xsmall);
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-xsmall);
  line-height: var(--line-height-xsmall);
}

.dxp-text-xsmall p {
  --dxp-c-text-block-font-weight: var(--font-weight-xsmall);
}

.text-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}
.dxp-text-bold p {
  --dxp-c-text-block-font-weight: var(--font-weight-bold);
}

.text-semibold {
  font-weight: var(--font-weight-semibold);
}

.dxp-background-brand {
  background-color: var(--color-white);
}

.dxp-background-brand:before {
  background-image: url('/sfsites/c/resource/ClientPortal/images/background.svg#Layer_1');
}

.dxp-background-brand:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.dxp-background-brand.dxp-background-height-limited:before {
  height: 500px;
}

.dxp-grid-gutters-small .dxp-block-flexible-container > .slds-grid {
  margin-left: calc(var(--dxp-g-spacing-small)*-1);
  margin-right: calc(var(--dxp-g-spacing-small)*-1);
}

.dxp-grid-gutters-medium .dxp-block-flexible-container > .slds-grid {
  margin-left: calc(var(--dxp-g-spacing-medium)*-1);
  margin-right: calc(var(--dxp-g-spacing-medium)*-1);
}

/* A workaround for the standard Grid component issue that was preventing columns from expanding to their full heights */
.dxp-grid-align-items-normal .dxp-block-flexible-container > .slds-grid.slds-wrap {
  align-items: normal;
}

.dxp-header {
  background-color: var(--color-navi-blue);
}

.dxp-footer {
  background-color: var(--color-navi-blue);
}

.dxp-welcome {
  --c-notification-spacing-block-start: 4rem;
  --c-notification-spacing-block-end: 4rem;
}

/* Invalidate global vertical padding settings for icon buttons */
.slds-button.slds-button_icon {
  --dxp-s-button-padding-block-start: 0;
  --dxp-s-button-padding-block-end: 0;
}

/* Workaround for the standard Rich Text being displayed with large gaps between rows when using images */
community_builder-rich-text-editor.dxp-rte-text-gap-workaround community_builder-output-rich-text .cb-outputRichText-container.ql-editor,
community_builder-output-rich-text.dxp-rte-text-gap-workaround .cb-outputRichText-container.ql-editor {
  white-space: normal;
}

/* remove default black outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* workaround to change spinner color 
to be removed once Salesforce adds relevant variables
*/
.slds-spinner_brand.slds-spinner:before,
.slds-spinner_brand.slds-spinner:after,
.slds-spinner_brand .slds-spinner__dot-a:before,
.slds-spinner_brand .slds-spinner__dot-a:after,
.slds-spinner_brand .slds-spinner__dot-b:before,
.slds-spinner_brand .slds-spinner__dot-b:after {
  background-color: var(--color-teal-400);
}