/*Palette V.2.0*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  /* Primitive/Colours Styles */

  --primary-element-background: #FFFfff;
  --primary-element-pale: #FBF8FF;
  /* --primary-element-pale: #fff; */
  /* this color is updated to achieve background color of web pages as per figma*/
  --primary-element-subtle: #FBF8FF;
  --primary-element-light: #CBBCDA;
  --primary-element-mid-light: #B29CC8;
  --primary-element-mid: #582887;
  --primary-element-mid-dark: #3E1C60;
  --primary-element-dark: #582887;

  /* Secondary/Element */
  --secondary-element-background: #F3FAFC;
  --secondary-element-pale: #F7F4F0;
  --secondary-element-subtle: #E5DED1;
  --secondary-element-light: #E5DED1;
  --secondary-element-mid-light: #879CAA;
  --secondary-element-mid: #0099CC;
  --secondary-element-mid-dark: #587281;
  --secondary-element-dark: #004056;

  /* Primary/Button */
  --primary-button-foreground-ondark: #FFFFFF;
  --primary-button-foreground-onlight: #582887;
  --primary-button-label-inverted: #B29CC8;
  --primary-button-resting: #582887;
  --primary-button-hover: #B29CC8;
  --primary-button-pressed: #B29CC8;

  /* Secondary/Button */
  --secondary-button-foreground-ondark: #F8F8F8;
  --secondary-button-foreground-onlight: #004056;
  --secondary-button-label-inverted: #587281;
  --secondary-button-resting: #0099CC;
  --secondary-button-hover: #587281;
  --secondary-button-pressed: #879CAA;

  /* Tertiary/Button */
  --tertiary-button-foreground-ondark: #FFFFFF;
  --tertiary-button-foreground-onlight: #C35EA3;
  --tertiary-button-label-inverted: #5B0840;
  --tertiary-button-resting: #C35EA3;
  --tertiary-button-hover: #5B0840;
  --tertiary-button-pressed: #E3B5D4;

  /* Primary/Navigation */
  --primary-nav-label-selected: #FFFFFF;
  --primary-nav-label-resting: #582887;
  --primary-nav-label-hover: #3E1C60;
  --primary-nav-label-pressed: #3E1C60;
  --primary-nav-container-selected: #582887;
  --primary-nav-container-selected-hover: #3E1C60;

  /* Primary/Chip */
  --primary-chip-label-selected: #582887;
  --primary-chip-border-selected: #582887;
  --primary-chip-container-selected: #FBF8FF;
  --primary-chip-container-selected-hover: #EEE9F3;

  /* Primary/Tab */
  --primary-tab-label-resting: #3E1C60;
  --primary-tab-container-active: #582887;
  --primary-tab-container-resting: #E5DED1;
  --primary-tab-container-resting-hover: #D4BBD7;

  /* Primary/Title */
  --primary-title-page-title: #582887;
  --primary-title-page-subtitle: #73237F;
  --primary-title-card-title: #582887;
  --primary-title-card-subtitle: #73237F;
  --primary-title-highlight: #73237F;

  /* Secondary/Title */
  --secondary-title-page-title: #004056;
  --secondary-title-page-subtitle: #0099CC;
  --secondary-title-card-title: #0099CC;
  --secondary-title-card-subtitle: #587281;
  --secondary-title-highlight: #0099CC;

  /* Primary/Body Text */
  --primary-body-text-highlight: #73237F;

  /* Secondary/Body Text */
  --secondary-body-text-highlight: #168BFF;


  /* Primary/Overlay */
  --primary-overlay-overlaylight: #30164A9E;

  /* Primary/Shadow */
  --primary-shadow-branded: #1D0214;


  /* Gradient/Element */
  --gradient-element-flashing: linear-gradient(135deg, #582887  0%, #582887 50.52%, #582887 100%);
  --gradient-element-fade: linear-gradient(90deg, #CBBCDA 0%, #CBBCDA 100%);

  /* ==========>          Gradients with the same start and end color */
  --gradient-element-pattern: linear-gradient(135deg, #c5caff 0%, #eceeff 50.52%, #c1f3de 100%);

  /* Gradient/Navigation */
  --gradient-navigation-separator: linear-gradient(90deg, #4454ff00 0%, #4454ff80 50%, #4555ff00 100%);
  --gradient-navigation-fade: linear-gradient(90deg, #F6E7F1 0%, #F6E7F1 100%);



  --font-title: "Roboto";

  --primary-hyperlink-onlight: #515170;
  --primary-hyperlink-ondark: #582887;

    --color-topnav-background: #F6E7F1;
}

body{
background:var(--primary-element-background);
}

/*  */

/* ISI references hidden */
.cmp-isi--row.cmp-isi--row__body.cmp-isi-scroll > .container.responsivegrid .cmp-text{
  display: none;
}

/* Hover state for font color */

@media (min-width: 1024px) {
  .cmp-primary-navigation-nav-2-0 .primary-nav .primary-nav__megamenu ul.megamenu li.sublink-parentlink.megamenu--active.hovered.blue-border a.megamenu-toggle {
    color: #fff !important;

  }

  /* active button for main pages that no contain child pages */
  .cmp-primary-navigation-nav-2-0.cmp-primary-nav .primary-nav-wrapper .primary-nav .primary-nav__megamenu ul.megamenu li a.megamenu-nomenu {
    padding: var(--space-3xs) var(--space-2xs);
  }

  .cmp-primary-navigation-nav-2-0 .primary-nav-wrapper .primary-nav__megamenu ul.megamenu > li.megamenu--active a.megamenu-nomenu, 
  .cmp-primary-navigation-nav-2-0 .primary-nav .primary-nav__megamenu ul.megamenu > li.megamenu--active a.megamenu-nomenu {
      color: var(--primary-nav-label-selected) !important;
      background: var(--primary-nav-container-selected);
      border-radius: var(--space-3xs);
  }

  /* horizontal aligment for illustrationset only for desktop*/
  .illustrationset .cmp-illustration .illustration-container {
    align-items: center;
  }
 
}

#card_set .illustration-container {
    align-items: center;
}

/* Tab text active state */
.tabs .cmp-tabs__tab--active,
.tabs .cmp-tabs__tab--active:hover {
  color: #fff !important;

}

/* Force breakline for urls in mobile in reference section */

.wordbreak {
  word-break: break-all;
}