:root{
   /* light font for h1, h2 */
  --allianceno1-light: 'Alliance No.1 Light', -apple-system, '\.SFNSText-SemiLight', BlinkMacSystemFont, 'Roboto Light', system-ui, 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;
  --light-font-weight: 300;
  
  /* regular font for body */ 
  --allianceno1-regular: 'Alliance No.1', -apple-system, '\.SFNSText-SemiLight', BlinkMacSystemFont, 'Roboto Light', system-ui, 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;
  --regular-font-weight: 400;
  
  /* semibold font for h3, h4, h5, h6, b, strong */ 
  --allianceno1-semibold: 'Alliance No.1 SemiBold', -apple-system, '\.SFNSText-SemiLight', BlinkMacSystemFont, 'Roboto Light', system-ui, 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;
  --semibold-font-weight: 700;
  
  /* extrabold font for headers Logo text */ 
  --allianceno1-extrabold: 'Alliance No.1 ExtraBold', -apple-system, '\.SFNSText-Bold', BlinkMacSystemFont, system-ui, 'Arial Black', sans-serif;
  --extrabold-font-weight: 900;
  
  /* Colors for text, links, borders */
  --text-primary: var(--carbon100BrandAccent);
  --text-secondary: var(--gray70);
  --text-link: var(--blue80);
  --link-primary: var(--blue60);
  --link-primary-hover: var(--blue60Hover);
  --link-inverse: var(--blue30);
  --link-secondary: var(--blue60Hover);
  --link-visited: var(--blue50Hover);
  --link-disabled: var(--gray100Alpha25);
  --link-focus: var(--blue60);
  --link-border-focus: var(--blue70);
  --layer-01: var(--earthWhite);
  --layer-02: var(--gray10);
  --layer-hover-01: var(--gray15);
  --layer-active-01: var(--gray30);
  --icon-primary: var(--earth90);
  --icon-secondary: var(--gray70);
  --sand: var(--earth40);
  --focus: var(--blue60);
  --layer-accent-01: var(--earth30);
  --layer-accent-hover-01: var(--gray25);
  --border-strong-01: var(--gray50);
  --border-interactive: #80f;
  --footer-menu: var(--blue10);
  --field-01: var(--white);
  --brand-primary: var(--blue60);
  
  /* Background colors */
  --background-micromedex: var(--earthWhite);
  --background-login: var(--earth10);
  --background-brand-secondary: var(--blue20);
  --background: var(--earth10);
  
  /* Button Body styles-body-compact-01 */
  --button-fill: var(--earthWhite);
  --button-color: var(--earthWhite);
  
  --button-disabled-fill: var(--gray50);
  --button-disabled-color: var(--gray50);
  --button-disabled-background: var(--gray30);
  
  /* Primary button */
  --button-primary-background: var(--blue70);
  --button-primary-hover: var(--blue80);
  --button-primary-active: var(--blue90);
  --button-primary-focus: var(--blue60);
  --button-primary-focus-border: var(--blue70);
  
  /* Secondary button same values as primary need to check with Robert */
  --button-secondary-background: var(--blue70);
  --button-secondary-hover: var(--blue80);
  --button-secondary-active: var(--blue90);
  --button-secondary-focus: var(--blue60);
  --button-secondary-focus-border: var(--blue70);
  
  /* Tertiary button */
  --button-tertiary-fill: var(--blue70);
  --button-tertiary-color: var(--blue70);
  --button-tertiary-background: var(--earthWhite);
  --button-tertiary-focus-border: var(--blue70); /* Provided as background color but in image it's border color */

  --button-tertiary-hover-fill: var(--earthWhite);
  --button-tertiary-hover-color: var(--earthWhite);
  --button-tertiary-hover-background: var(--blue80);
  --button-tertiary-active-background: var(--blue90);
  --button-tertiary-focus-background: var(--blue60);

  --button-tertiary-disabled-fill: var(--gray30);
  --button-tertiary-disabled-color: var(--gray30);
  --button-tertiary-disabled-background: var(--earthWhite);
  --button-tertiary-disabled-border: var(--gray30);
  
  /* Ghost button */
  --button-ghost-fill: var(--blue60);
  --button-ghost-color: var(--blue60);
  --button-ghost-background: var(--earthWhite);

  --button-ghost-hover-fill: var(--blue60Hover);
  --button-ghost-hover-color: var(--blue60Hover);
  --button-ghost-hover-background: var(--gray50); /* Actual value #8D8D8D1F but not available in color palette */
  --button-ghost-active-background: var(--gray50Alpha50);
  --button-ghost-focus-background: var(--earthWhite);
  --button-ghost-focus-border: var(--blue70);

  --button-ghost-disabled-fill: var(--gray30);
  --button-ghost-disabled-color: var(--gray30);
  --button-ghost-disabled-background: var(--earthWhite);  
  
  /* Header ghost button */
  --header-button-ghost-fill: var(--text-secondary);
  --header-button-ghost-color: var(--text-secondary);
  --header-button-ghost-background: var(--earth10); /* For button enabled, hover, active */
  
  --header-button-ghost-focus-border: var(--blue70);

  --header-button-ghost-disabled-fill: var(--gray30);
  --header-button-ghost-disabled-color: var(--gray30);
  --header-button-ghost-disabled-background: var(--earth10);  
  
  /* Footer ghost button */
  --footer-button-ghost-fill: var(--carbon100BrandAccent);
  --footer-button-ghost-color: var(--carbon100BrandAccent);
  --footer-button-ghost-background: var(--blue20); /* For button enabled, hover, active */
  
  --footer-button-ghost-focus-border: var(--blue70);

  --footer-button-ghost-disabled-fill: var(--gray30);
  --footer-button-ghost-disabled-color: var(--gray30);
  --footer-button-ghost-disabled-background: var(--blue20);  
  
  /* Fluid styles/SM/fluid-display-07 banners */
  --banner1-font-size: 2.25rem; /* 36px */
  --banner1-font-style: normal;
  --banner1-font-weight: 300;
  --banner1-line-height: 2.75rem; /* 44px | 122.222% */
  --banner1-letter-spacing: 0rem;
  
  /*@media screen and (min-width: 672) MED breakpoint */
  --banner1-med-font-size: 2.625rem; 
  --banner1-med-line-height: 2.75rem;

  /*@media screen and (min-width: 1312) XLG breakpoint */
  --banner1-xlg-font-size: 3rem; 
  --banner1-xlg-line-height: 3.5rem;

  /*@media screen and (min-width: 1784) MAX+ breakpoint */
  --banner1-max-font-size: 3.375rem; 
  --banner1-max-line-height: 4rem;

  /* Fluid styles/SM/fluid-heading-06 homepage login */
  --heading1-font-size: 2rem; /* 32px */
  --heading1-font-style: normal;
  --heading1-font-weight: 300;
  --heading1-line-height: 2.5rem; /* 40px | 125% */
  --heading1-letter-spacing: 0rem;

  /*@media screen and (min-width: 672) MED breakpoint */
  --heading1-med-font-size: 2.25rem;
  --heading1-med-line-height: 2.5rem;

  /*@media screen and (min-width: 1312) XLG breakpoint */
  --heading1-xlg-font-size: 2.625rem; 
  --heading1-xlg-line-height: 3.125rem;

  /*@media screen and (min-width: 1784) MAX+ breakpoint */
  --heading1-max-font-size: 3rem; 
  --heading1-max-line-height: 3.5rem;

  /* Fluid styles/SM/fluid-heading-05 h1 */
  --h1-font-size: 1.25rem; /* 20px */
  --h1-font-style: normal;
  --h1-font-weight: 300;
  --h1-line-height: 1.75rem; /* 28px | 140% */
  --h1-letter-spacing: 0rem;
  
  /*@media screen and (min-width: 672) MED breakpoint */
  --h1-med-font-size: 1.75rem;
  --h1-med-line-height: 2.25rem;
 
  /*@media screen and (min-width: 1312) XLG breakpoint */
  --h1-xlg-font-size: 2rem; 
  --h1-xlg-line-height: 2.5rem;

  /* Fluid styles/SM/fluid-heading-04 h2 */
  --h2-font-size: 1.125rem; /* 18px */
  --h2-font-style: normal;
  --h2-font-weight: 600;
  --h2-line-height: 1.5rem; /* 24px | 133.333% */
  --h2-letter-spacing: 0rem;
  
  /* @media screen and (min-width: 672) MED breakpoint */
  --h2-med-font-size: 1.25rem; 
  --h2-med-line-height: 1.625rem;

  /*@media screen and (min-width: 1312) XLG breakpoint */
  --h2-xlg-font-size: 1.5rem; 
  --h2-xlg-line-height: 2rem;

  /* Fluid styles/SM/fluid-heading-03 .sectionTopicDiv h3 */
  --h31-font-size: 1.25rem; /* 20px */
  --h31-font-style: normal;
  --h31-font-weight: 600;
  --h31-line-height: 1.75rem; /* 28px | 140% */
  --h31-letter-spacing: 0rem;
  
  /* @media screen and (min-width: 1312) XLG breakpoint */
  --h31-xlg-font-size: 1.5rem; /* 1.4375rem conflicts with media query */
  --h31-xlg-line-height: 2rem;

  /* Fluid styles/SM/fluid-heading-02 .section-header div .maindivshowresults h3 */
  --h32-font-size: 1rem; /* 16px */
  --h32-font-style: normal;
  --h32-font-weight: 300;
  --h32-line-height: 1.3125rem; /* 21px | 131.25% */
  --h32-letter-spacing: 0rem;
  
  /* @media screen and (min-width: 1312) XLG breakpoint */
  --h32-xlg-font-size: 1.125rem; 
  --h32-xlg-line-height: 1.5rem;

  /* Fluid styles/SM/fluid-heading-01 h4 .popupsubheading */
  --h4-font-size: 0.875rem; /* 14px */
  --h4-font-style: normal;
  --h4-font-weight: 600;
  --h4-line-height: 1.25rem; /* 20px | 142.857% */
  --h4-letter-spacing: 0.01rem;
  
  /* @media screen and (min-width: 1312) XLG breakpoint */
  --h4-xlg-font-size: 1rem; 
  --h4-xlg-line-height: 1.5rem;
  
  /* Fluid styles/SM/fluid-heading-00 h5 */
  --h5-font-size: 0.875rem; /* 14px */
  --h5-font-style: normal;
  --h5-font-weight: 400;
  --h5-line-height: 1.25rem; /* 20px | 142.857% */
  --h5-letter-spacing: 0.01rem;
  --h5-text-transform: uppercase;

  /* @media screen and (min-width: 1312) XLG breakpoint */
  --h5-xlg-font-size: 1rem; 
  --h5-xlg-line-height: 1.5rem;
  
  /* Fixed heading styles/heading-compact-01 fixed headings */
  --heading2-font-size: 0.875rem; /* 14px */
  --heading2-font-style: normal;
  --heading2-font-weight: 600;
  --heading2-line-height: 1.125rem; /* 18px | 128.571% */
  --heading2-letter-spacing: 0.01rem;
  
  /* Fluid styles/SM/fluid-body-01 longer paragraph text, p, li*/
  --p-font-size: 0.875rem; /* 14px */
  --p-font-style: normal;
  --p-font-weight: 400;
  --p-line-height: 1.25rem; /* 20px | 142.857% */
  --p-letter-spacing: 0.01rem;
  
  /* @media screen and (min-width: 1312) XLG breakpoint */
  --p-xlg-font-size: 1rem; 
  --p-xlg-line-height: 1.5rem;

  /* Body styles/body-compact-01 shorter paragraph text, div, span*/
  --div-font-size: 0.875rem; /* 14px */
  --div-font-style: normal;
  --div-font-weight: 400;
  --div-line-height: 1.125rem; /* 18px | 128.571% */
  --div-letter-spacing: 0.01rem;
  
  /* Body styles/boldface  Note: this could possibly follow the pattern  Boldface/fluid-body-01, Boldface/body-compact-01
etc. See link styling strong, b, [style~="700"] , [style~="bold"] Selects all elements with a style attribute containing the word "700" or "bold" */
  --bold-font-weight: 600;
  
  /* Utility styles/label-01 */
  --label1-font-size: 0.75rem; /* 12px */
  --label1-font-style: normal;
  --label1-font-weight: 400;
  --label1-line-height: 1rem; /* 16px | 133.333% */
  --label1-letter-spacing: 0.02rem;
  
  /* Utility styles/label-02 */
  --label2-font-size: 0.875rem; /* 14px */
  --label2-font-style: normal;
  --label2-font-weight: 400;
  --label2-line-height: 1.125rem; /* 18px | 128.571% */
  --label2-letter-spacing: 0.01rem;
  
  /* Utility styles/helper-text-01 .iv-copy-text .genAIDisclaimer span */
  --helper-font-size: 0.75rem; /* 12px */
  --helper-font-style: normal;
  --helper-font-weight: 400;
  --helper-line-height: 1rem; /* 16px | 133.333% */
  --helper-letter-spacing: 0.02rem;
  
  /* Fluid styles/SM/fluid-legal-01 */
  --legal1-font-size: 0.75rem; /* 12px */
  --legal1-font-style: normal;
  --legal1-font-weight: 400;
  --legal1-line-height: 1rem; /* 16px | 133.333% */
  --legal1-letter-spacing: 0.02rem;

  /*@media screen and (min-width: 1312) XLG breakpoint */
  --legal1-xlgfont-size: 0.875rem; 
  --legal1-xlg-line-height: 1.125rem; 
  --legal1-xlg-letter-spacing: 0.01rem;
  
  /* Utility styles/helper-text-01 */
  --legal2-font-size: 0.875rem; /* 14px */
  --legal2-font-style: normal;
  --legal2-font-weight: 600;
  --legal2-line-height: 1.125rem; /* 18px | 150% */
  --legal2-letter-spacing: 0.01rem;

  /* Link use body-compact-01 for other styles */
  --link-text-decoration-line: underline;
  --link-text-decoration-style: solid;
  --link-text-decoration-skip-ink: none;
  --link-text-decoration-thickness: auto;
  --link-text-underline-offset: auto;
  --link-text-underline-position: from-font;


  /* brand-header logo */
  --brand-header-border: none;
  --brand-header-focus-border: 2px solid var(--blue60);
  
  /* brand-footer logo */
  --brand-footer-border: none;
  --brand-footer-focus-border: 2px solid var(--blue60);
  
  /* text input */
  --text-input-border-bottom: 1px solid var(--gray50);
  --text-input-background-color: var(--gray10);
  
  --text-input-placeholder: var(--gray60);

  --text-input-disabled: var(--gray50);
  --text-input-disabled-border-bottom: none;;

  --text-input-focus-border-color: var(--blue60);

  --text-input-error--border: 2px solid var(--red60);
  --text-error-message: var(--red60);
  
  /* Search input */
  --search-border-bottom: 1px solid var(--gray50);
  --search-background-color: var(--earthWhite);
  --search-text-on-disabled-color: var(--gray50);
  --search-disabled-border-bottom: none;
  --search-focus-border-color: var(--blue60);
  
  /* text input height/box sizes */
  --large-textbox: 3rem; /* 48px */
  --medium-textbox: 2.5rem; /* 40px */
  --small-textbox: 2rem; /* 32px */

  /* Fluid styles/SM/width-body-text #headerAppTopProducts, #contentLeft, #footerNav */
  --max-page-width: 99%;
  
  /* @media screen and (min-width: 1784) MAX+ breakpoint */
  --page-max-margin-left: auto; 
  --page-max-margin-right: auto; 
  --page-max-width: 1784px;

  /* Tab styles TO BE ADDED */
  
}

/* Note: Verify that these Merative-licensed Alliance No.1 fonts are uploaded on the web server, the minimum woff2 format */
@font-face {
   font-family: 'Alliance No.1 Light';
   src: url('../fonts/Merative-Styles/woff2/AllianceNo.1-Light.woff2') format('woff2'), url('../fonts/Merative-Styles/woff/AllianceNo.1-Light.woff') format('woff');
}
@font-face {
   font-family: 'Alliance No.1';
   src: url('../fonts/Merative-Styles/woff2/AllianceNo.1-Regular.woff2') format('woff2'), url('../fonts/Merative-Styles/woff/AllianceNo.1-Regular.woff') format('woff');
}
@font-face {
   font-family: 'Alliance No.1 SemiBold';
   src: url('../fonts/Merative-Styles/woff2/AllianceNo.1-SemiBold.woff2') format('woff2'), url('../fonts/Merative-Styles/woff/AllianceNo.1-SemiBold.woff') format('woff');
}
@font-face {
   font-family: 'Alliance No.1 ExtraBold';
   src: url('../fonts/Merative-Styles/woff2/AllianceNo.1-ExtraBold.woff2') format('woff2'), url('../fonts/Merative-Styles/woff/AllianceNo.1-ExtraBold.woff') format('woff');
}
