/*Palette V.2.1*/

/* -------------------------------------------------------------------
   CSS Revision Notes V.2.1
   -------------------------------------------------------------------

   This stylesheet has been updated with the following adjustments:

   • Unused rules specific to this site have been commented out to improve maintainability and clarity.
   • Gradient definitions have been refined and standardized for visual consistency across components.
   • color-mix() has been introduced with appropriate fallback values to ensure compatibility with legacy browsers 
     (e.g., pre-Safari 16.4, pre-Chrome 111).

   These changes aim to enhance cross-browser stability, maintain consistency with the design system, and facilitate future updates.

   ------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: slick;
  src: url(slick/slick.eot);
  src: url(slick/slick.eot?#iefix) format("embedded-opentype"),
    url(slick/slick.woff) format("woff"),
    url(slick/slick.ttf) format("truetype"),
    url(slick/slick.svg#slick) format("svg");
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Primitive/Colours Styles */

  /* Primary */
  --color-primary-00: #ffffff;
  --color-primary-05: #fef8fa;
  --color-primary-50: #fbe9ed;
  --color-primary-100: #f3b9c7;
  --color-primary-200: #ee98ab;
  --color-primary-300: #e66885;
  --color-primary-400: #e14b6d;
  --color-primary-500: #d91e49;
  --color-primary-600: #c51b42;
  --color-primary-700: #9a1534;
  --color-primary-800: #771128;
  --color-primary-900: #5b0d1f;

  /* Secondary */
  --color-secondary-00: #ffffff;
  --color-secondary-05: #fcf9fa;
  --color-secondary-50: #f6eaed;
  --color-secondary-100: #e3bdc8;
  --color-secondary-200: #d69dae;
  --color-secondary-300: #c37188;
  --color-secondary-400: #b85571;
  --color-secondary-500: #a62b4e;
  --color-secondary-600: #972747;
  --color-secondary-700: #761f37;
  --color-secondary-800: #5b182b;
  --color-secondary-900: #461221;

  /* Tertiary */
  --color-tertiary-00: #ffffff;
  --color-tertiary-05: #fcfcfc;
  --color-tertiary-50: #f4f4f5;
  --color-tertiary-100: #dededf;
  --color-tertiary-200: #cdcecf;
  --color-tertiary-300: #b7b8b9;
  --color-tertiary-400: #a9aaac;
  --color-tertiary-500: #939597;
  --color-tertiary-600: #868889;
  --color-tertiary-700: #686a6b;
  --color-tertiary-800: #515253;
  --color-tertiary-900: #3e3f3f;

  /* Additional 
  --color-additional-00: #ffffff;
  --color-additional-05: #fcfcfd;
  --color-additional-50: #f6f6f7;
  --color-additional-100: #e4e4e5;
  --color-additional-200: #d7d7d9;
  --color-additional-300: #c4c5c7;
  --color-additional-400: #b9babd;
  --color-additional-500: #a7a9ac;
  --color-additional-600: #989a9d;
  --color-additional-700: #77787a;
  --color-additional-800: #5c5d5f;
  --color-additional-900: #464748;
  */

  /* Aliases Colour */
  /* Primary/Element */
  --primary-element-background: var(--color-primary-00);
  --primary-element-pale: var(--color-primary-05);
  --primary-element-subtle: var(--color-primary-50);
  --primary-element-light: var(--color-primary-100);
  --primary-element-mid-light: var(--color-primary-300);
  --primary-element-mid: var(--color-primary-500);
  --primary-element-mid-dark: var(--color-primary-700);
  --primary-element-dark: var(--color-primary-900);

  /* Secondary/Element */
  --secondary-element-background: var(--color-secondary-00);
  --secondary-element-pale: var(--color-secondary-05);
  --secondary-element-subtle: var(--color-secondary-50);
  --secondary-element-light: var(--color-secondary-100);
  --secondary-element-mid-light: var(--color-secondary-300);
  --secondary-element-mid: var(--color-secondary-500);
  --secondary-element-mid-dark: var(--color-secondary-700);
  --secondary-element-dark: var(--color-primary-900);

  /* Primary/Button */
  --primary-button-foreground-ondark: var(--color-primary-00);
  --primary-button-foreground-onlight: var(--color-primary-500);
  --primary-button-label-inverted: var(--color-primary-900);
  --primary-button-resting: var(--color-primary-500);
  --primary-button-hover: var(--color-primary-700);
  --primary-button-pressed: var(--color-primary-800);

  /* Secondary/Button */
  --secondary-button-foreground-ondark: var(--color-secondary-00);
  --secondary-button-foreground-onlight: var(--color-secondary-500);
  --secondary-button-label-inverted: var(--color-secondary-900);
  --secondary-button-resting: var(--color-secondary-500);
  --secondary-button-hover: var(--color-secondary-700);
  --secondary-button-pressed: var(--color-secondary-800);

  /* Tertiary/Button */
  --tertiary-button-foreground-ondark: var(--color-primary-00);
  --tertiary-button-foreground-onlight: var(--color-primary-700);
  --tertiary-button-label-inverted: var(--color-primary-900);
  --tertiary-button-resting: var(--color-primary-700);
  --tertiary-button-hover: var(--color-primary-800);
  --tertiary-button-pressed: var(--color-primary-900);

  /* Primary/Navigation */
  --primary-nav-label-selected: var(--color-primary-00);
  --primary-nav-label-resting: var(--color-primary-700);
  --primary-nav-label-hover: var(--color-primary-800);
  --primary-nav-label-pressed: var(--color-primary-900);
  --primary-nav-container-selected: var(--color-primary-500);
  --primary-nav-container-selected-hover: var(--color-primary-700);

  /* Primary/Chip */
  --primary-chip-label-selected: var(--color-primary-500);
  --primary-chip-border-selected: var(--color-primary-500);
  --primary-chip-container-selected: var(--color-primary-50);
  --primary-chip-container-selected-hover: var(--color-primary-100);

  /* Primary/Tab */
  --primary-tab-label-resting: var(--color-primary-00);
  --primary-tab-container-active: var(--color-primary-00);
  --primary-tab-container-resting: var(--color-primary-500);
  --primary-tab-container-resting-hover: var(--color-primary-700);

  /* Primary/Title */
  --primary-title-page-title: var(--color-primary-500);
  --primary-title-page-subtitle: var(--color-primary-700);
  --primary-title-card-title: var(--color-primary-800);
  --primary-title-card-subtitle: var(--color-primary-700);
  --primary-title-highlight: var(--color-primary-500);

  /* Secondary/Title */
  --secondary-title-page-title: var(--color-secondary-900);
  --secondary-title-page-subtitle: var(--color-secondary-700);
  --secondary-title-card-title: var(--color-secondary-900);
  --secondary-title-card-subtitle: var(--color-secondary-700);
  --secondary-title-highlight: var(--color-secondary-600);

  /* Primary/Body Text */
  --primary-body-text-highlight: var(--color-primary-600);

  /* Secondary/Body Text */
  --secondary-body-text-highlight: var(--color-secondary-600);

  /* Primary/Hyperlink */
  --primary-hyperlink-onlight: var(--color-primary-500);
  --primary-hyperlink-ondark: var(--color-primary-50);

  /* Primary/Anchor Link */
  --primary-anchor-link-resting: var(--color-primary-500);
  --primary-anchor-link-hover: var(--color-primary-700);
  --primary-anchor-link-pressed: var(--color-primary-800);

  /* Primary/Overlay */
  /* Fallback for older browsers (pre-Safari 16.4, pre-Chrome 111) */
  --primary-overlay-overlaylight: rgba(91, 13, 31, 0.5);

  /* Modern browsers override using color-mix() */
  --primary-overlay-overlaylight: color-mix(
    in srgb,
    var(--color-primary-900) 50%,
    transparent
  );

  /* Primary/Shadow */
  --primary-shadow-branded: var(--color-primary-800);

  /* Gradient/Element */
  --gradient-element-flashing: linear-gradient(
    180deg,
    var(--color-primary-100) 0%,
    var(--color-primary-50) 50.52%,
    var(--color-primary-100) 100%
  );

  --gradient-element-fade: linear-gradient(
    90deg,
    var(--color-primary-05) 0%,
    var(--color-primary-05) 100%
  );

  --gradient-element-pattern: linear-gradient(
    135deg,
    var(--color-primary-100),
    var(--color-primary-50) 50.52%,
    var(--color-secondary-100)
  );

  /* Gradient/Navigation */
  /* Fallback for Old Browsers */
  --gradient-navigation-separator: linear-gradient(
    90deg,
    rgba(251, 233, 237, 0) 0%,
    rgba(217, 30, 73, 0.5) 50%,
    rgba(251, 233, 237, 0) 100%
  );

  --gradient-navigation-separator: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-50) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-500) 50%, transparent) 50%,
    color-mix(in srgb, var(--color-primary-50) 0%, transparent) 100%
  );

  /* Fallback*/
  --gradient-navigation-footer-separator: linear-gradient(
    270deg,
    rgba(3, 3, 3, 0) 0%,
    #a62b4e 50%,
    rgba(232, 231, 239, 0) 100%
  );

  --gradient-navigation-footer-separator: linear-gradient(
    270deg,
    transparent 0%,
    var(--color-secondary-500) 50%,
    color-mix(in srgb, var(--color-tertiary-100) 0%, transparent) 100%
  );

  /* Fallback  */
  --gradient-navigation-fade: linear-gradient(
    90deg,
    rgba(251, 233, 237, 0) 0%,
    #fbe9ed 100%
  );

  --gradient-navigation-fade: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-50) 0%, transparent) 0%,
    var(--color-primary-50) 100%
  );

  /* Font */
  --font-title: "Roboto";

  .txt-modal-title {
    color: var(--color-primary-500);
  }

  /* -------------------------------------------------------------------
   Brand Colors – HCP
   ------------------------------------------------------------------- */
  /* AmBisome (Primary blue) */
  --color-hcp-ambisome: #0071bb;

  /* CRESEMBA (Auxiliary magenta) */
  --color-hcp-cresemba: #94348c;

  /* LEXISCAN (Support purple) */
  --color-hcp-lexiscan: #652e88;

  /* PADCEV (Accent deep blue) */
  --color-hcp-padcev: #180e5e;

  /* XOSPATA (Support violet) */
  --color-hcp-xospata: #582887;

  /* -------------------------------------------------------------------
   Brand Colors – DTC / Patient
   ------------------------------------------------------------------- */
  /* CRESEMBA (Primary magenta) */
  --color-dtc-cresemba: #94348c;

  /* PADCEV (Primary deep blue) */
  --color-dtc-padcev: #180e5e;

  /* XOSPATA (Auxiliary violet) */
  --color-dtc-xospata: #582887;

  /* XTANDI (Accent red) */
  --color-dtc-xtandi: #bf311a;
}

/* -------------------------------------------------------------------
   Background Utilities – HCP
   ------------------------------------------------------------------- */

.bg-hcp-ambisome {
  background-color: var(--color-hcp-ambisome);
}

.bg-hcp-cresemba {
  background-color: var(--color-hcp-cresemba);
}

.bg-hcp-lexiscan {
  background-color: var(--color-hcp-lexiscan);
}

.bg-hcp-padcev {
  background-color: var(--color-hcp-padcev);
}

.bg-hcp-xospata {
  background-color: var(--color-hcp-xospata);
}

.txt-hcp-ambisome {
  color: var(--color-hcp-ambisome);
}

.txt-hcp-cresemba {
  color: var(--color-hcp-cresemba);
}

.txt-hcp-lexiscan {
  color: var(--color-hcp-lexiscan);
}

.txt-hcp-padcev {
  color: var(--color-hcp-padcev);
}

.txt-hcp-xospata {
  color: var(--color-hcp-xospata);
}

/* -------------------------------------------------------------------
   Background Utilities – DTC / Patient
   ------------------------------------------------------------------- */

.bg-dtc-cresemba {
  background-color: var(--color-dtc-cresemba);
}

.bg-dtc-padcev {
  background-color: var(--color-dtc-padcev);
}

.bg-dtc-xospata {
  background-color: var(--color-dtc-xospata);
}

.bg-dtc-xtandi {
  background-color: var(--color-dtc-xtandi);
}

.txt-dtc-cresemba {
  color: var(--color-dtc-cresemba);
}

.txt-dtc-padcev {
  color: var(--color-dtc-padcev);
}

.txt-dtc-xospata {
  color: var(--color-dtc-xospata);
}

.txt-dtc-xtandi {
  color: var(--color-dtc-xtandi);
}

/* --------------------------------------------------------------- */
body {
  background-color: var(--color-primary-00) !important;
}

/* -------------------------- overwrites -------------------------- */
table {
  border: 2px solid #22222f;
  background-color: #f6f6f8;
}

table thead tr th {
  background: #22222f !important ;
  color: #ffffff;
  border: 2px solid #3a3a50;
}

table tbody td {
  color: #515170;
  border: 2px solid #d9dae2;
}
table tbody tr th {
  border: 2px solid rgb(81, 81, 112);
  background-color: rgb(81, 81, 112);
  color: rgb(255, 255, 255);
  font-size: var(--step--1) !important;
}

table tbody tr td {
  font-size: var(--step--1) !important;
}
.text .cmp-text table tr:first-child > th {
  color: #ffffff;
}

.text.cmp-text__table-column--state-neutral-05 .cmp-text table tr > td,
.text .cmp-text table td:nth-child(odd) {
  background-color: #eeeef1;
}

.text.cmp-text__type-3 tr th {
  font-weight: 600;
}


.cmp-primary-navigation-nav-2-0.cmp-primary-nav:has(.cmp-logo-wide) .primary-nav-wrapper .primary-nav .image .cmp-image {
    max-width: 132px;
    width: 180% !important;
}

.cmp-primary-navigation-nav-2-0.cmp-primary-nav:has(.cmp-logo-wide) .primary-nav-wrapper .primary-nav .image .cmp-image a,.cmp-primary-navigation-nav-2-0.cmp-primary-nav:has(.cmp-logo-wide) .primary-nav-wrapper .primary-nav .image .cmp-image img {
    max-height: 66px;
    max-width: 132px;
    height: 66px;
    width: 132px;
}


/* Breadcrumbs bg color */
header .container.responsivegrid.cmp-sticky-header.cmp-sticky-header--fixed.cmp-header--fixed {
  
  background: #fff;

}