/* Medical Automation v2 - CSS Variables */

:root {
  /* Colors */
  --color-primary: #830051;
  --color-primary-medium: #CAB0C1;
  --color-primary-light: #F3E5EE;

  --color-secondary: #003864;
  --color-secondary-medium: #B9C8D2;
  --color-secondary-light: #E5EBEF;

  --color-gold: #F0AB00;
  --color-gold-medium: #EDE6D1;
  --color-gold-light: #FDF7E5;

  --color-text-body: #3C4242;
  --color-mulberry-60: #B36697;
  
  --color-text-contrast: None;
  --color-white: #ffffff;
  --color-dark: #000000;
  --color-gray: #ECEFF1;
  --color-title-h5: #3C4242BF;
  --color-title-h6: #777B7B;
  --color-feedback-txt: #2C3030;
  --color-feedback-bg: #E5EBEF73;
  --color-border-gray: #B8B8B8;
  --color-body-background: #D0D4DA;
  --color-thumbs-color: #8A8E8E;
  --color-footer-bg: #F8F8F8;
  --color-accordian-footer: #EBEFEE;
  --color-table-shading-dark: #2C3030;
  --color-table-shading-medium: #B2C3D0;
  --color-table-shading-light: #EBECEC;
  --color-active-webtabs: #E1C6D4;
  --color-border-webtabs: #B8C3CA;
  --color-footnote-txt-bg: #dbf8fc;
  --color-separator-line: #C5D3DD;

  /*Table Shading Color Palette*/
  --color-table-shading-dark-gray: #3F4444;
  --color-table-shading-medium-gray: #9DB0AC;
  --color-table-shading-light-gray: #EBEFEE;

  --color-table-shading-dark-mulberry: #830051;
  --color-table-shading-medium-mulberry: #CAB0C1;
  --color-table-shading-light-mulberry: #F3E5EE;

  --color-table-shading-dark-gold: #F0AB00;
  --color-table-shading-medium-gold: #F3D07A;
  --color-table-shading-light-gold: #FDF7E5;

  --color-table-shading-dark-navy: #003864;
  --color-table-shading-medium-navy: #8AAFCB;
  --color-table-shading-light-navy: #D6E4EE;

  --color-tabs-material-gray: #B2B4B4;

  /* Vertical WebTabs*/
  --color-webtabs-bg: #F8F8F8;
  --color-webtabs-border: #9DB0AC;
  --color-webtabs-txt: #777B7B;
  --color-tab-label-hover: #F1EAEF;
  --color-active-webtabs-bg: #E6CCDCCC;
  --color-webtabspanel-border: #DCDCDC;
  --font-size-vertical-tab-label: 20px;
  --padding-vertical-tab-label: 16px;
  --padding-vertical-tabpanel: 16px;

  /* Font Family */
  --font-family-display: 'lexia', 'sans-serif';
  --font-family-text: 'Inter', 'Arial', 'sans-serif';

  /* Font Sizes */
  --font-size-hero-h1: 56px;
  --font-size-h2: 42px;
  --font-size-h3: 30px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;
  --font-size-footnote: 13px;
  --font-size-mediaCaption: 16px;
  --font-size-tableCell: 14px;
  --font-size-bodyCopy: 18px;
  --font-size-accordianBody: 18px;
  --font-size-cardsTitle: 20px;
  --font-size-footer-txt: 12px;
  --font-size-leftNavbar: 18px;

  /* Line Height*/
  --line-height-hero-h1: 1.2;
  --line-height-h2: 1.2;
  --line-height-cardsTitle: 1.2;
  --line-height-h3: 1.3;
  --line-height-title: 1.4;
  --line-height-txt: 1.5;
  --line-height-caption: 1.5;
  --line-height-footnote: 1.5;

  /*Padding Sizes*/
  --padding-container: 24px 32px;
  --padding-hero-container: 48px;
  --padding-table-cell: 12px 16px;
  --padding-media-content: 24px;
  --padding-pagination: 80px 0;
  --padding-footer-white-container: 32px 16px;
  --padding-footer-txt: 6px 0px;
  --padding-cardsText: 16px;
  --padding-bottom-h3: 12px;
  --padding-webtabs-panel: 32px;
}

/* Media */
/* XL Desktop */
@media only screen and (min-width: 1440px) {
  :root {
    /* Font Sizes */
    --font-size-hero-h1: 48px;
    --font-size-h2: 40px;
    --font-size-h3: 34px;
    --font-size-h4: 26px;
    --font-size-h5: 22px;
    --font-size-h6: 18px;
    --font-size-footnote: 14px;
    --font-size-mediaCaption: 18px;
    --font-size-tableCell: 16px;
    --font-size-bodyCopy: 20px;
    --font-size-accordianBody: 18px;
    --font-size-cardsTitle: 24px;
    --font-size-leftNavbar: 20px;

    /*Padding Sizes*/
    --padding-container: 32px 24px;
    --padding-hero-container: 48px;
    --padding-table-cell: 12px 16px;
    --padding-media-content: 24px;
    --padding-pagination: 80px 0;
    --padding-button: 12px 20px;
    --padding-bottom-h3: 8px;
    --padding-top-h3: 34px;
    --padding-top-h4: 26px;
    --padding-top-h5: 22px;
    --padding-top-h6: 18px;
    --padding-webtabs-panel: 32px;

    /*Modal width and padding*/
    --modal-width:50%;
    --modal-padding:24px;

    /*Header Icon Sizing for cards */
    --icon-sizing-cards: 90%;

    /* Table Image Size */
    --table-image-size: 370px;

    /* Separator Line Margin */
    --margin-separator-line: 48px 0;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  :root {
    /* Font Sizes */
    --font-size-hero-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 30px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 16px;
    --font-size-footnote: 13px;
    --font-size-mediaCaption: 16px;
    --font-size-tableCell: 14px;
    --font-size-bodyCopy: 18px;
    --font-size-accordianBody: 18px;
    --font-size-cardsTitle: 20px;
    --font-size-leftNavbar: 18px;

    /*Padding Sizes*/
    --padding-container: 32px 24px;
    --padding-hero-container: 48px;
    --padding-table-cell: 12px 16px;
    --padding-media-content: 24px;
    --padding-pagination: 80px 0;
    --padding-button: 12px 20px;
    --padding-bottom-h3: 6px;
    --padding-top-h3: 30px;
    --padding-top-h4: 24px;
    --padding-top-h5: 20px;
    --padding-top-h6: 16px;
    --padding-webtabs-panel: 24px;

    /*Modal width and padding*/
    --modal-width:50%;
    --modal-padding:24px;

    /*Header Icon Sizing for cards */
    --icon-sizing-cards: 90%;

    /* Table Image Size */
    --table-image-size: 300px;

    /* Separator Line Margin */
    --margin-separator-line: 40px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    /* Font Sizes */
    --font-size-hero-h1: 36px;
    --font-size-h2: 32px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 18px;
    --font-size-h6: 14px;
    --font-size-mediaCaption: 14px;
    --font-size-tableCell: 14px;
    --font-size-footnote: 12px;
    --font-size-bodyCopy: 16px;
    --font-size-accordianBody: 18px;
    --font-size-cardsTitle: 18px;
    --font-size-leftNavbar: 14px;
    --font-size-vertical-tab-label: 18px;

    /*Padding Sizes*/
    --padding-container: 16px 24px;
    --padding-hero-container: 32px;
    --padding-table-cell: 10px 16px;
    --padding-media-content: 24px;
    --padding-pagination: 60px 0;
    --padding-footer-container: 42px;
    --padding-button: 8px 16px;
    --padding-bottom-h3: 6px;
    --padding-top-h3: 26px;
    --padding-top-h4: 22px;
    --padding-top-h5: 18px;
    --padding-top-h6: 14px;
    --padding-webtabs-panel: 16px;
    --padding-vertical-tab-label: 12px 8px;
    --padding-vertical-tabpanel: 16px 12px;

    /*Modal width and padding*/
    --modal-width:75%;
    --modal-padding:20px;

    /*Header Icon Sizing for cards */
    --icon-sizing-cards: 90%;

    /* Table Image Size */
    --table-image-size: 250px;

    /* Separator Line Margin */
    --margin-separator-line: 32px 0;
  }
}
@media screen and (max-width: 767px) {
  :root {
    /* Font Sizes */
    --font-size-hero-h1: 30px;
    --font-size-h2: 28px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h5: 16px;
    --font-size-h6: 13px;
    --font-size-mediaCaption: 13px;
    --font-size-tableCell: 12px;
    --font-size-footnote: 12px;
    --font-size-bodyCopy: 15px;
    --font-size-accordianBody: 16px;
    --font-size-cardsTitle: 16px;
    --font-size-leftNavbar: 14px;
    --font-size-vertical-tab-label: 16px;

    /*Padding Sizes*/
    --padding-container: 16px;
    --padding-hero-container: 20px;
    --padding-table-cell: 8px 12px;
    --padding-media-content: 16px;
    --padding-pagination: 40px 0;
    --padding-footer-container: 42px;
    --padding-button: 8px 16px;
    --padding-bottom-h3: 4px;
    --padding-top-h3: 22px;
    --padding-top-h4: 20px;
    --padding-top-h5: 16px;
    --padding-top-h6: 13px;
    --padding-webtabs-panel: 16px;
    --padding-vertical-tab-label: 8px;
    --padding-vertical-tabpanel: 16px 8px;

    /*Modal width and padding*/
    --modal-width:90%;
    --modal-padding:18px;

    /*Header Icon Sizing for cards */
    --icon-sizing-cards: 65%;

    /* Table Image Size */
    --table-image-size: 180px;

    /* Separator Line Margin */
    --margin-separator-line: 24px 0;
  }
}

@media screen and (max-width: 1023px) and (orientation: landscape){
  :root {
    --padding-container: 16px;
  }
}

.hidden{
  display: none !important;
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
       only screen and (-o-min-device-pixel-ratio: 1.5), 
       only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-device-pixel-ratio: 1.5) {
 .modal-wrapper:has(.cmp-imagelist__item) {
      width: 60%;
  }
}