:root {

  --color-primary-00 : #ffffff;
  --color-primary-05 : #F2F2F2;
  --color-primary-45 : #E3BDC8;
  --color-primary-50 : #A62B4E;
  --color-primary-100 : #85223E;
  --color-primary-200 : #7D203B;
  --color-primary-300 : #828cff; 
  --color-primary-400 : #6976ff; 
  --color-primary-500 : #7D203B;
  --color-primary-600 : #3e4ce8; 
  --color-primary-700 : #641A2F;
  --color-primary-800 : #4B1323;
  --color-primary-900 : #A62B4E;

  --color-secondary-00 : #ffffff;
  --color-secondary-05 : #F2F2F2;
  --color-secondary-50 : #A6A8AB;
  --color-secondary-100 : #555759;
  --color-secondary-200 : #a3eecf; 
  --color-secondary-300 : #7ae6b9; 
  --color-secondary-400 : #60e1ab; 
  --color-secondary-500 : #444647;
  --color-secondary-600 : #33c589; 
  --color-secondary-700 : #333435;
  --color-secondary-800 : #262728;
  --color-secondary-900 : #000000;

  --color-tertiary-00 : #ffffff; 
  --color-tertiary-05 : #fffef7; 
  --color-tertiary-50 : #fffbe9; 
  --color-tertiary-100 : #fff2b9; 
  --color-tertiary-200 : #ffeb98;  
  --color-tertiary-300 : #ffe268; 
  --color-tertiary-400 : #ffdd4b; 
  --color-tertiary-500 : #D91E49;
  --color-tertiary-600 : #e8c11b; 
  --color-tertiary-700 : #004C97;
  --color-tertiary-800 : #658D1B;
  --color-tertiary-900 : #6b590d; 

  --color-additional-00 : #ffffff; 
  --color-additional-05 : #fefbfe; 
  --color-additional-50 : #A20067;
  --color-additional-100 : #658D1B;
  --color-additional-200 : #f5c0f2; 
  --color-additional-300 : #f0a3ec; 
  --color-additional-400 : #ed91e9; 
  --color-additional-500 : #c6563a;
  --color-additional-600 : #d46bcf; 
  --color-additional-700 : #a554a1; 
  --color-additional-800 : #80417d; 
  --color-additional-900 : #62325f; 

  --primary-element-page-background : var(--color-primary-00);
  --primary-element-background : var(--color-secondary-05);
  --primary-element-subtle : var(--color-primary-05);
  --primary-element-pale : var(--color-primary-00); 
  --primary-element-light : var(--color-primary-50);
  --primary-element-normal : var(--color-tertiary-500);
  --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);

  --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-tertiary-500);
  --primary-button-hover : var(--color-primary-700);
  --primary-button-pressed : var(--color-primary-800);

  --primary-nav-label-selected : var(--color-primary-00);
  --primary-nav-label-resting : var(--color-primary-50);
  --primary-nav-label-hover : var(--color-primary-800);
  --primary-nav-label-pressed : var(--color-primary-900);
  --primary-nav-container-selected : var(--color-tertiary-500);
  --primary-nav-container-selected-hover : var(--color-primary-700);

  --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-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-inverted : var(--color-primary-00); 
  --primary-title-page-title : var(--color-primary-50);
  --primary-title-page-subtitle : var(--color-primary-700);
  --primary-title-card-title : var(--color-primary-900);
  --primary-title-card-subtitle : var(--color-primary-700);
  --primary-title-highlight : var(--color-primary-600);
  
  --primary-body-text-inverted : var(--color-primary-00); 
  --primary-body-text-highlight : var(--color-primary-600); 

  --primary-overlay-overlaylight: rgb(29, 35, 107, 0.4);

  --primary-shadow-branded : var(--color-primary-800);

  --secondary-element-background : var(--color-secondary-00);
  --secondary-element-page-background : var(--color-secondary-05);
  --secondary-element-pale : var(--color-secondary-05);
  --secondary-element-subtle : var(--color-secondary-50);
  --secondary-element-light : var(--color-secondary-05);
  --secondary-element-normal : var(--color-tertiary-500);
  --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-secondary-900);

  --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);

  --secondary-title-inverted : var(--color-secondary-00); 
  --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);

  --secondary-body-text-inverted : var(--color-secondary-00); 
  --secondary-body-text-highlight : var(--color-secondary-600); 

  --tertiary-button-foreground-ondark : var(--color-tertiary-00); 
  --tertiary-button-foreground-onlight : var(--color-tertiary-500); 
  --tertiary-button-label-inverted : var(--color-tertiary-900);
  --tertiary-button-resting : var(--color-tertiary-500);
  --tertiary-button-hover : var(--color-tertiary-700);
  --tertiary-button-pressed : var(--color-tertiary-800);

  --gradient-element-flashing : linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%);
  --gradient-element-nav : linear-gradient(90deg, #4454ff00 0%, #4454ff80 50%, #4555ff00 100%);
  --gradient1  : linear-gradient(135deg, #c5caff 0%, #eceeff 50.52%, #c1f3de 100%);
  --gradient-element-nav-fade : linear-gradient(90deg, #eceeff00 0%, #eceeff 100%);
  --gradient-element-pattern : linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%); 

  --gradient-navigation-separator : linear-gradient(45deg, #b9ee1700 0%, #a62b4e 50%, #ec14b900 100%);
  --gradient-navigation-fade : linear-gradient(90deg, #eceeff00 0%, #eceeff 100%);
  --gradient-element-fade : linear-gradient(90deg, #F9FAFF 0%, #F9FAFF 100%);
}

:root {

  --color-topnav-background: #F2F2F2;
  --color-footer-background: #2d2d3e;
  --color-loader: 29, 35, 107;

  --font-petrona: 'Petrona';
  --font-jakarta: 'Plus Sans Jakarta';
  --font-title: var(--font-petrona);

}
@media only screen and (min-width: 320px) and (max-width:1023.99px) {
  #gradient_pattern{
    background-image: url(https://astellas-qa.scene7.com/is/content/astellasqa/astellaselement/hcp/est/gb/en/test-image/astellaswave3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
}
  @media only screen and (min-width:1024px) {
    #gradient_pattern{
      background-image: url(https://astellas-qa.scene7.com/is/content/astellasqa/astellaselement/hcp/est/gb/en/test-image/astellaswave3.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
    #gradient_pattern1{
      background-image: url(https://astellas-qa.scene7.com/is/content/astellasqa/astellaselement/hcp/est/gb/en/test-image/astellaswave3.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top;
    }