/*** Dashboard CSS ***/
/* Linked Account */
.accountLinkingWrapper, .inValidatedAccountLinkingWrapper, .moreAccLoginContainer,
.removeAccContainer,.removeInvalidatedAccContainer {
    display:flex;
}
.removeAccContainer {
    margin-top: 2rem;
    flex-direction: column;
    justify-content: space-around;

}
.removeInvalidatedAccContainer {
    margin-left:4.8rem;
    flex-direction: column;
    justify-content: space-around;
}
.username, .createDate {
    min-width: 13rem;
}
.actionReq {
    width:13rem;
}
.moreAccLoginContainer {
    justify-content: flex-end;
    gap: 2rem;
    margin-right: 5rem;
}
.logginBtn {
    font-size: 15px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* Deactivate Acc */
#accountLinkDelete, #confirmationTwo {
    padding: 0 0 6rem 0;
    display: none;
}
#accountLinkDelete > .modalContainer > .modalTitleBar > .modalTitle,
#confirmationTwo > .modalContainer > .modalTitleBar > .modalTitle
 {
    background: #3A60FF;
    padding: .7rem;
    margin-bottom: 1rem;
 }
#accountLinkDelete > .modalContainer > .modalTitleBar > .modalTitle h2,
#confirmationTwo > .modalContainer > .modalTitleBar > .modalTitle h2 {
    color:#fff;
 }
 .modalTitleBar .close-button {
    position: absolute;
    right: 1rem;
    top: 1.2rem;
 }
 .removal-confirmation-msg-one .paragraphContainer, .removal-confirmation-msg-two .paragraphContainer {
    margin-bottom: 3rem !important;
    margin-top: 2rem !important;
 }
 .reveal p {
   margin-bottom:unset;
}
.noAccLogin {
    display: flex;
    justify-content: end;
    margin-right: 5rem;
}
/*** Taylor CSS ***/
.taylorOverlay
{
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;
    background-color: #D6D6D6;
    width: 100%;
    height: 200%;
}

.taylorMessage
{
    font-family: var(--base-font-family);
    font-size: 2rem;
    width: auto;
    text-align: center;
    margin: 4rem auto 0 auto;
    color: #979797;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.csrBreadCrumbs
{
    display: none;
}

/* JJH - REMOVE THESE ONCE WE GET THE CORRECT SIZED IMAGES
    for now, these are only on the rewards page in 2 places
*/
.jay-image-hack-one {
    width: 100px;
    padding: 1rem 0; /* this might need to be kept and moved into another rule */
}

.jay-image-hack-two {
    width: 80px;
    margin-right: 1.5rem;
}
/* END HACKS TO REMOVE */

/* JJH - trying to get the sticky nav working again so removing these
.fixed-nav-height {
  margin-top: unset;
}

header .topNavContainer {
  position: relative;
  left: unset;
  z-index: unset;
  width: 100%;
  top: unset;
}

.globalNavigation {
  position: relative;
  top: unset;
  left: unset;
  z-index: unset;
  width: 100%;
}
*/

.topNavContainer.navbar-fixed {
    top: 0;
    position: fixed;
    z-index: 9999;
}


/*** text css ***/
p
{
    line-height: 1.4;
}

/*** link css ***/
a,
a:hover,
a:active,
a:link,
a:visited,
a.standardLink i::before,
a.standartLink i::after
{
    color: var(--link-text-color);
}

.summary-container .button.secondary
{
    margin-left: 0;
    margin-right: 0;
}

.updateLinkedAcc a {
    color:red;
}
.expand-collapse {
    display: flex;
    justify-content: end;
    gap: .3rem;
    padding: 0.5rem;
    align-items: center;
}
.dataRefreshContainer
{
    display: inline-flex;
    flex-grow: 2;
}
.refreshMessage
{
    display: none;
    align-items: center;
    border: 1px solid red;
    color: red;
    padding: 1rem;
}
.refreshMessage a
{
    text-decoration: underline;
}
.refreshMessage i
{
    font-size: 1.5rem;
    padding-right: 0.6rem;
}
.inValidatedAccountLinkingWrapper > .createDate > .linkedCreationDate {
    margin-right: 7.8rem;
}
.tierOverlay a,
.tierOverlay a:hover,
.tierOverlay a:active,
.tierOverlay a:link,
.tierOverlay a:visited,
.tierOverlay a.standardLink i::before,
.tierOverlay a.standartLink i::after
{
    color: #fff;
    text-decoration: underline;
}

.tierOverlay a.footnoteLink sup
{
    color: var(--section-text-color-bkgd1);
    font-size: 60%;
    text-decoration: underline;
    top: -0.7em;
}

footer a,
footer a:hover,
footer a:active,
footer a:link,
footer a:visited,
footer a.standardLink i::before,
footer a.standartLink i::after
{
    color: #fff;
}

/*** headers ***/
/*** h1 - main content page header ***/
/*** h2 - page division headers ***/
/*** h3 - chart component title, blockgrid headers ***/
/*** h4 - flex grid column titles ***/

/* h1
{
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0;
    font-size: 1.25rem
} */

.ndtHeaderParagraph p
{
    font-size: 1.375rem;
    line-height: 33px;
}

.ndtHeaderParagraph h1
{
    margin-bottom: 18px;
    font-size: 2.25rem;
    font-weight: 300;
}

h2
{
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-size: 1.3125rem;
    line-height: 1.0;
    text-transform: uppercase;
}

.eligibilityCurrentStatus h2
{
    margin-bottom: 0.2rem;
    display: inline-block;
}

.componentTitle h2
{
    margin-bottom: 0;
}

h3
{
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #030211;
    letter-spacing: 1px;
    line-height: 19px;
    margin-bottom: 0.3rem;
    padding: 0;
}

h4 {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.15px;
    margin-bottom: 0;
}

.no-bold-no-upper h4 {
    font-weight: 600;
    text-transform: none;
}

.section-color-background1 {
    background-color: #F6F6F6;
}

.section-color-light {
    background-color: var(--light-grey);
}

/*** dashboard bar css ***/

.dashboard-bar-container,
.dashboard-bar-label,
.dashboard-bar-message,
.dashboard-bar-message p
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dashboard-bar-message
{
    flex-grow: 1;
}

.dashboard-message
{
    display: flex;
    flex-direction: row;
}

.dashboard-footnote-label
{
    padding: 0 0.5rem 0 0;
}

/* .dashboard-bar-message {
    padding-left: .5rem
} */

.dashboard-bar-container a,
.dashboard-bar-container a:hover,
.dashboard-bar-container a:active,
.dashboard-bar-container a:visited,
.dateRangeMenuApply .button
{
    font-size: 0.875rem;
    color: var(--link-text-color);
}

.dashboard-bar-content
{
    display: flex;
    flex-direction: row;
    /* flex-grow: 2; */
    flex-wrap: nowrap;
    align-items: center;
}

.dashboard-bar-label {
    font-size: 1.125rem;
    font-weight: 600;
    flex-wrap: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dashboard-bar-status-indicators
{
    display: flex;
    flex-direction: row;
}

.premier-edge-status
{
    margin-right: 2rem;
    font-weight: 700;
    color: var(--vsp-blue-black);
    letter-spacing: 1.14px;
    font-size: 1rem;
}

.status-row .premier-edge-status
{
    margin-right: 0;
}

.statusRow
{
    height: 100px;
}

.premier-edge-status::after,
/* .premier-network-status::after, */
.statusRow .pecaamaxStatus.locked::after,
.statusRow .premieredgepecaamaxStatus.locked::after
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: var(--premier-color);
    font-size: 1.5rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

.statusIndicatorRow .premier-edge-status::after
{
    content: none;
}

.premier-edge-status.locked::after,
.statusRow .pecaamaxStatus.locked::after,
.statusRow .premieredgepecaamaxStatus.locked::after,
.dataAlternateLabel .premier-network-status.locked::after,
#unityCard .paragraphCopy.locked::before
{
    color: var(--text-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f023';
    border: 2px solid #000;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    margin: 0 0.5rem;
    padding-left: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tableHeadLockedIcon,
.tableHeadCheckIcon
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

#tierTablePremierPecaaMax .premierPecaamaxHeaderMobile
{
    display: flex;
    flex-direction: column;
}

#tierTablePremierPecaaMax .highValueHighlite
{
    font-size: 1.15rem;
}

/* #tierTablePremierPecaaMax .tableHeadLockedIcon,
#tierTablePremierPecaaMax .tableHeadCheckIcon
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
} */

.tableHeadLockedIcon::before,
.tableHeadCheckIcon::before
{
    color: #fff;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f023';
    border: none;
    height: 15px;
    width: 15px;
    margin: -0.1rem 0.6rem 0 0;
    padding-left: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tableHeadCheckIcon::before
{
    content: '\f00c';
}


#unityCard .paragraphCopy.locked::before
{
    padding-left: 1px;
    margin: 0 0.5rem 0 0;
}

#unityCard .paragraphCopy
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/*.dataAlternateLabel .premier-network-status.locked::after*/
/*{*/
/*    padding-top: 0.2rem;*/
/*}*/

.pecaa-status
{
    font-weight: 700;
    color: var(--vsp-blue-black);
    letter-spacing: 1.14px;
    font-size: 1rem;
}

.pecaa-status::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: var(--pecaa-green-color);
    font-size: 1.5rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

.pecaa-status.locked::after {
    color: var(--text-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f023';
    border: 2px solid #000;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    margin: 0 0.5rem;
    padding-left: 0;
    font-size: 1rem;
}

.nonPremierUnityRewards
{
    display: none;
}

.unityStatInfoGraphics
{
    justify-content: space-around;
}

.lobBlockGridGroup .columnBlock .linkContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.lobBlockGridGroup .columnBlock .linkContainer .standardLink
{
    line-height: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.block-grid-program-tiles
{
    display: flex;
    justify-content: center;
    width: 150px;
    height: auto;
}

.premierMember
{
    display: flex;
    align-items: center;
    justify-content: center;
}


#my-practice-bar .dashboard-bar-label
{
    font-size: 1rem;
}

#premier-value-bar {
    padding: 1rem;
    margin-bottom: 0;
    position: relative;
}

#premier-value-bar .dashboard-bar-content
{
    padding: 0;
    width: auto;
}

#premier-value-bar .dashboard-bar-label {
    padding: 0 0 0 0.25rem;
}

.dashboard-footnote-label sup {
    top: -0.25rem;
    font-size: 100%;
}

.dashboard-footnote-label.tallSuperscript sup {
    top: -0.8rem;
    font-size: 100%;
}

div#footnoteModal {
    top: 80px !important;
    display: flex;
    flex-direction: column;
}

#premier-value-bar .dashboard-bar-image .image
{
    width: 75px;
    height: 35px;
}

#my-practice-bar
{
    position: relative;
    padding-top: var(--single-gutter-padding);
    padding-bottom: var(--single-gutter-padding);
}

/* #premier-value-bar .iconImage.
.eligibility-rewards-component .iconImage */
.iconImage.circularBorder
{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    font-size: 1.1rem;
    margin: 0;
}

/*** add margin-bottom to icons in various components ***/
.eligibility-rewards-container .iconImage,
.modalContainer .iconImage
{
    margin-bottom: 0.8rem;
}

#practiceMenu
{
    background-color: #fff;
}

#practiceMenu.menuStyling .practiceName
{
    flex-grow: 1;
}

#practiceMenu.menuStyling.iconAfter i {
    padding-left: 0;
    line-height: 1;
}

.menuStyling.iconAfter i {
    line-height: 1;
}

.dashboard-message p {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 800;
    padding-left: 0.75rem;
    padding-right: 0;
}

.dashboard-bar-message p {
    margin-bottom: 0;
    font-size: 0.8125rem;
}

.dashboard-message p.valueAmountRightPadding
{
    padding-right: 0.75rem;
}

div.practice-menu
{
    padding: 0;
    position: relative;
}

/* div.menuStyling
{
    background-color: #fff;
} */

.adminLinks div.menuStyling {
    background-color: transparent;
    border: none;
}

.adminLinks div.menuStyling.iconAfter i {
    padding-left: 1rem;
    line-height: unset;
}

#profileAdmin-title::before
{
    font-family: "Font Awesome 6 Pro";
    content: "\f2bd";
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    padding-right: 0.6rem;
}
#profileAdmin
{
    top: 43.2px !important;
}


/* select.practice-menu
{
    margin-bottom: 0;
    flex-basis: 60%;
} */

.practice-bar-cta {
    display: flex;
    justify-content: flex-end;
}

.dashboard-bar .row,
.nav-bar .row,
section.pageBodyRow

{
    max-width: 90rem !important;
}

/*** practice menu css ***/

/* #practice-menu-items
{
    width: auto;
} */

.practiceMenuScroller
{
    max-height: 375px;
    overflow: hidden;
    overflow-y: auto;
}

.practiceMenuSearch
{
    margin: 0 0 1.4rem 0;
    width: 100%;
    position: relative;
    display: none;
}

input.practiceSearchBox
{
    width: 100%;
    padding: 0.8rem 3.5rem 0.8rem 1.25rem;
    display: block;
    outline: none;
    height: auto;
}


.practiceMenuSearch button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.1rem 1rem 0.9rem 1rem;
    z-index: 2;
}

.fg--search input:focus + button .fa-search {
  color: red;
}

.dashboard-bar.section-margin,
.nav-bar.section-margin
{
    margin-bottom: 2rem;
}

.practiceGroup
{
    border-top: 1px solid #cacaca;
    padding-top: 1rem;
    margin-top: 1rem;
}

.practiceGroup.noBorder:first-child
{
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0;
    padding: 0;
}

.practiceGroupHeader
{
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 0.3rem;
}

.practiceGroupItem
{
    display: block;
    padding: 0.3rem 0;
}

/*** text link CSS ***/
a.practiceGroupItem
{
    color: var(--text-color);
    text-decoration: none;
}

a.practiceGroupHeader
{
    color: #030211;
    font-weight: 800;
}

a.practiceGroupItem:visited,
a.practiceGroupItem:hover,
a.practiceGroupItem:focus,
a.practiceGroupItem:active
{
    color: var(--text-color);
    text-decoration: none;
}

a.practiceGroupHeader:visited,
a.practiceGroupHeader:hover,
a.practiceGroupHeader:focus,
a.practiceGroupHeader:active
{
    color: #030211;
    text-decoration: none;
}

.dateMenu a.standardLink.htmlRadio:active,
.dateMenu a.standardLink.htmlRadio:hover,
.dateMenu a.standardLink.htmlRadio:active,
.dateMenu a.standardLink.htmlRadio:visited
{
        text-decoration: none;
}

a.practiceGroupItem::before,
a.practiceGroupHeader::before,
a.htmlRadio::before
{
    font-family: "Font Awesome 6 Pro";
    content: '\f111';
    font-weight: 200;
    font-style: normal;
    padding-right: 0.5rem;
    color: var(--text-color);
}

a.practiceGroupItem.selected::before,
a.practiceGroupHeader.selected::before,
a.htmlRadio.selected::before
{
    font-family: "Font Awesome 6 Pro";
    content: '\f192';
    font-style: normal;
    font-weight: 800;
    color: var(--link-text-color);
}

.practiceMenuApply
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 1rem 0 0 0;
}

.practiceMenuApply .button,
.dateRangeMenuApply .button
{
    margin: 0;
    padding: 0.5rem 1.1rem;
    text-transform: uppercase;
    background-color: var(--section-color-bkgd2);
    color: #fff;
    border: 1px solid var(--section-color-bkgd2);
}

.text-element-container
{
  border: 2px solid var(--vsp-gray);
  padding: 0 35px 0 8px;
  position: relative;
}

.text-element-container:hover,
.select-element-container:hover {
    border: 2px solid #241ED6;
}

.refresh::before
{
    content: '\f057';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    color: var(--vsp-gray);
    height: 15px;
    width: 15px;
}

.element-outline-container.focus
{
    padding: 3px;
    border: 2px dotted var(--vsp-dark-blue);
}

.element-outline-container.focus .text-element-container,
.element-outline-container.focus .select-element-container
{
    border: 2px solid var(--vsp-dark-blue);
    height: auto;
}

.error-message-wrapper {
    border: 1px solid var(--prh-danger-default);
}

.select-element-container
{
  border: 2px solid var(--vsp-gray);
}

form .ui-selectmenu-text::after,
.ui-selectmenu-text::after
{
  font-family: "Font Awesome 6 Pro";
  content: '\f107';
  font-size: 1.2rem;
  color: var(--vsp-dark-blue);
  font-weight: 800;
}

.ui-state-active, .ui-widget-content .ui-state-active
{
  border: 2px solid transparent;
  background-color: var(--vsp-dark-blue);
  font-weight: normal;
  color: #ffffff;
}

.ui-state-active:hover
{
  border: 2px solid transparent;
  background-color: var(--vsp-dark-blue);
  font-weight: normal;
  color: #ffffff;
}

.select-element-container
{
  padding: 0 0 0 8px;
}

.ui-selectmenu-text
{
  padding: 16px 0 16px 0;
}

.text-element-container.disabled,
.text-element-container.disabled:hover
{
  background-color: #F6F6F6;
}

.ui-widget.ui-widget-content
{
  border: 1px solid var(--vsp-gray);
}

.ui-selectmenu-menu .ui-menu .ui-menu-item
{
  border-bottom: 1px solid var(--vsp-gray);
}

/*** nav bar css ***/

.nav-bar-container
{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #D6D6D6;
    padding-bottom: 0.7rem;

}

/* .subnav-NextDashBoard,
.subnav-PrevDashBoard
{
    border-left: none;
    border-right: none;
} */

/* .subnav-NextDashBoard::before,
.subnav-PrevDashBoard::before
{
    content: '';
} */

.nav-bar-container a.standardLink
{
    position: relative;
    font-size: 0.875rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #030211;
}

.nav-bar-container a.standardLink:visited,
.nav-bar-container a.standardLink:hover,
.nav-bar-container a.standardLink:focus,
.nav-bar-container a.standardLink:active
{
    color: #030211;
    text-decoration: none;
}

.nav-bar-container a.standardLink.selected::before,
.nav-bar-container a.standardLink.selectedNav::before
{
    position: absolute;
    height: 7px;
    background-color: blue;
    width: 100%;
    bottom: 0;
    margin-bottom: -18px;
    content: "";
}

/*** status bar css ***/

/* jjh added to give the proper (new) spacing at top of page(s) - double check this */
.status-bar {
    padding: 2rem 0 1rem;
}

.status-bar-container
{
    display: inline-flex;
    flex-direction: row;
    font-weight: bold;
    font-family: var(--base-font-family);
    align-items: center;
    color: #030211;
    letter-spacing: 1.14px;
    flex-wrap: wrap;
    position: relative;
}

.status-bar-container .status {
    font-size: 1.3125rem;
    text-transform: uppercase;
}

.status-bar-container .pageTitle {
    flex-grow: 1;
    text-transform: uppercase;
    font-size: 1.3125rem;
}

.status-bar-container .downloadStatement
{
    display: inline-flex;
    flex-direction: row;
    font-size: 0.875rem;
    justify-content: space-evenly;
    align-items: center;
}

.status-bar-container .downloadText
{
    margin-right: 1rem;
}


/*** Chart Block CSS ***/
.chart-table-component {
    border: 1px solid var(--light-background);
    /* margin-bottom: 1rem; */
    /* width: 360px; */
}

.chart-table-component.noChartBorder
{
    border: none;
}

#purchaseProgress
{
    width: 40%;
    text-align: center;
    padding: 2rem 0;
}

#purchaseProgress .display-container
{
    padding-top: 0;
}

#purchaseProgress .display-chart-container
{
    padding-top: 0;
    padding-bottom: 0;
}

.donutChartSubTitle
{
    font-size: 0.75rem;
}

.donutFooter
{
    padding: 0 0 1rem 0;
}

.donutData,
.donutLink
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* .column-flex-container .componentTitle h4
{
    margin-bottom: 0.6rem;
} */

.mobileChartInstructions
{
    display: block;
    font-size: 0.7rem;
    font-weight: normal;
    padding-top: 0.4rem;
}

.display-container
{
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
}

.premierFeature
{
    border: 1px solid var(--premier-color);
    border-bottom: 1px solid var(--premier-color);
}

.premierFeature .image.premier-edge-logo img,
.unityFeature .image.premier-edge-logo img
{
    width: 60px;
    height: auto;
    padding-top: 3px;
}

.premierFeature .image,
.unityFeature .image
{
    padding-left: 0;
    padding-right: var(--single-gutter-padding);
}

#premier-value-bar.premierFeature::before
{
    padding: 0;
    display: none;
}

#premier-value-bar .premierValueAmount
{
    font-size: 1.75rem;
    font-weight: 800;
    padding: 0;
}



/*** UNITY Feature CSS ***/
.unityFeature
{
    border: 1px solid var(--unity-theme-color);
}

.unityFeature .linkContainer,
.pecaaFeature .linkContainer
{
    width: unset;
}

.unityMessageSpreadBackground
{
    background: rgba(214, 214, 214, 0.5);
}

/*** PECAA Feature CSS ***/
.pecaaFeature
{
    border: 1px solid var(--pecaa-theme-color);
}

.pecaaFeatureGreen
{
    border: 1px solid var(--pecaa-green-color);
    padding: 1.5rem 1.5rem 1rem 1.5rem;
}

.premierFeatureOrange
{
    border: 1px solid var(--premier-color);
    padding: 1.5rem 1.5rem 1rem 1.5rem;
}

.blockGridChartFormat .headerBlock
{
    justify-content: flex-start;
}

.blockGridChartFormat .headerBlock .linkContainer
{
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.blockGridChartFormat .headerBlock .linkContainer .standardLink
{
    align-items: center;
    margin-bottom: 0;
}

.pecaaFeature .componentBadge .main-triangle
{
    border-left: 60px solid var(--pecaa-theme-color);
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    background-color: transparent;
}

.pecaaFeature .spreadCol2
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.pecaaFeature .spreadCol2 .image .image_caption p
{
    font-size: 0.9rem;
    line-height: 1.0;
    padding-top: 0.5rem;
}

.blockGridChartFormat .headerBlock .paragraphContainer h3
{
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1.0;
    margin: 0;
}

.blockGridChartFormat .headerBlock .paragraphContainer h3 img
{
    margin: 0 5px 0 0;
}



/*** badge css ***/
.container.hasBadgeOverlay
{
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
}

.pecaaDataSpread .container.standardPadding.hasBadgeOverlay,
.nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay,
.unityPointsGridSection .container
{
    padding: 2.5rem 1rem 2.5rem 2rem;
}

.componentBadge.badgeLeft
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.componentBadge .overlay-triangle
{
    border-left: 30px solid white;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.componentBadge .overlay-triangle.section-color-light
{
    border-left: 30px solid var(--section-color-bkgd1);
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    background-color: transparent;
}

.componentBadge .overlay-triangle.section-color-background1
{
    border-left: 30px solid var(--section-color-bkgd1);
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    background-color: transparent;
}

.componentBadge .overlay-triangle.section-color-background2
{
    border-left: 30px solid var(--section-color-bkgd2);
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    background-color: transparent;
}

.componentBadge .overlay-triangle.section-white-background
{
    border-left: 30px solid var(--section-white-background);
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    background-color: transparent;
}

.componentBadge .main-triangle
{
    border-left: 60px solid var(--unity-theme-color);
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    height: 0;
    width: 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
}

.componentBadge .main-triangle.section-color-background2
{
    border-left: 60px solid var(--section-color-bkgd2);
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    background-color: transparent;
}

.componentBadge .main-triangle.section-color-background4
{
    border-left: 60px solid var(--section-color-bkgd4);
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    background-color: transparent;
}

.componentBadge .main-triangle p
{
    top: 11px;
    left: -54px;
    position: absolute;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    color: white;
    font-weight: bold;
    font-family: Arial;
    font-size: 0.9rem;
    z-index: 10;
    margin-bottom: 0;
}

.rebate-color-block.premierFeature .summary-title-bar
{
    padding-top: var(--single-gutter-padding);
}

.rebate-color-block.premierFeature::before
{
    padding: 0;
}

.display-title-bar
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    /* padding-top: 1rem; */
}

.display-title-block
{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.chart-table-component .display-title-block
{
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.eligibilityCurrentStatus
{
    grid-area: eligibilityCurrentStatus;
    grid-column: 1 / 1;
    grid-row: 1/span 3;
}

.display-title-block .image
{
    /* grid-area: premierLogo;
    grid-column: 1 / 1;
    grid-row: 1/span 2; */
    /* padding-bottom: 0.5rem; */
}

.donutTitle1
{
    display: block;
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 0.8rem;
    line-height: 1.0;
    font-family: var(--base-font-family);

}

.donutTitle2
{
    display: block;
    font-size: 1.5rem;
    /* font-weight: bold; */
    padding-bottom: 0.2rem;
    line-height: 1.0;
    letter-spacing: 0.1px;
    font-family: var(--base-font-family);

}

.donutTitle3
{
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    font-family: var(--base-font-family);
}

.tooltipIcon {
    text-align: center;
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding-left: 0.5rem;
}

.dataAlternateLabel .tooltipIcon {
    padding-left: 0.1rem;
}

.tooltipIcon i::before
{
    display: inline-flex;
    color: #fff;
    font-size: 0.7rem;
    height: 20px;
    width: 20px;
    font-weight: 600;
    background-color: var(--link-text-color);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
}

.tooltipIcon i
{
    height: 20px;
    width: 20px;
    display: flex;
}

.tooltipIcon.has-tip {
    border-bottom: none;
    cursor: default;
}

.tooltip
{
    background-color: #fff;
    color: var(--vsp-blue-black);
    border: 1px solid #fff;
    max-width: 16rem;
    border-radius: 4px;
    padding: 0 1rem 1rem 1rem;
    filter: drop-shadow(2px 3px 6px #ABABAB);
    font-size: 1rem;
}

.tooltip.top::before
{
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(2px 12px 6px #ABABAB);
    border-top-width: 10px;
    border-bottom-width: 10px;
}

.tooltip.bottom::before
{
    border-color: transparent transparent #fff;
    filter: drop-shadow(3px -10px 39px #ABABAB);
}

.tooltip.right.align-center::before
{
    border-color: transparent #fff transparent transparent;
    filter: drop-shadow(-10px 3px 6px #ABABAB);
}

.tooltipIcon .fa-solid
{
    padding-right: 0;
}

.tooltip h1,
.tooltip h2,
.tooltip h3,
.tooltip h4
{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--vsp-blue-black) !important;
    text-transform: none;
}

.tooltip p
{
    color: var(--vsp-blue-black) !important;
    margin-bottom: 0;
    font-size: 0.875rem;
    padding-bottom: 0.4rem;
}

.tooltipClose
{
    display: flex;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    position: relative;
    color: #3A50FF;
    cursor: pointer;
    justify-content: flex-end;
    right: -7px;
    margin: 0.4rem 0;
    width: 100%;
}

.highcharts-tooltip {
  stroke-width: 1px;
  fill: white;
  fill-opacity: 1.0;
}

.highcharts-tooltip-container
{
    position: absolute;
    left: 0;
    bottom: 0;
}

.donutToolTip
{
    position: absolute;
    font-size: 0.8rem;
    background-color: #c7c7c7;
    opacity: 1.0;
    width: 300px;
    z-index:99990000 !important;
}

.misc-block
{

}

.display-title {
    grid-area: chartTitle;
    grid-column: 2 / 2;
    grid-row: 1 / 1;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    font-weight: 800;
    /* text-transform: uppercase; */
    color: #030211;
    letter-spacing: 1px;
    line-height: 19px;
    /* margin-bottom: 0.3rem; */
    align-items: center;
    padding-bottom: 0.375rem;
}

.display-title h3
{
    margin-bottom: 0;
}

.display-subtitle
{
    grid-area: chartSubtitle;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    font-weight: bold;
    text-transform: uppercase;
}

.chart-title-block .display-title {
    padding-bottom: 0;
}

/* .chartDateRange::after
{
    content: ': ';
    font-weight: bold;
    white-space: pre;
} */

.misc-block
{
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    align-items: center;
}

.misc-block a,
.misc-block a:hover,
.misc-block a:focus,
.misc-block a:active
{
    font-size: 0.875rem;
    line-height: 0.875rem;
}

.downloadLink i::before,
.downloadLink i::after
{
    color: #030211;
}

.display-chart-container,
.display-chart-progress {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;

}

.display-chart-container.donut
{
    align-items: center;
}

.display-progress-column
{
    align-items: unset;
}

/*** pecaa chart css ***/
.pecaaDataCharts .image,
#pecaaMarchonAltairChart .image
{
    width: 85px;
    height: auto;
    margin-right: 1rem;
}

/* .pecaaDataCharts .image.pecaaChartPecaaMaxLogo
{
    width: 135px;
    margin-right: 1rem;
} */





/*** table css ***/
.display-table-container
{
    display: none;
    position: relative;
    padding-left: var(--single-gutter-padding);
    padding-right: var(--single-gutter-padding);
    padding-top: var(--single-gutter-padding);
    padding-bottom: var(--single-gutter-padding);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
}

.display-table-container table {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  border: none;
  width: 100%;
}

.display-table-container table thead,
.display-table-container table tbody,
.display-table-container table tfoot,
.display-table-container table tr td
{
    border: none;
}

.display-table-container table thead tr th
{
    background: #D6D6D6;
    color: #030211;
    font-weight: bold;
    border-right: 1px solid #fff;
    font-size: 0.75rem;
    padding: 1rem 1rem 1rem 0;
    text-align: right;
    line-height: 1.0;
    width: 110px;
}

.display-table-container table tbody tr td
{
    border-right: 1px solid #D6D6D6;
    font-size: 0.75rem;
    padding: 1rem 1rem 1rem 0;
    text-align: right;
    line-height: 1.0;
    color: #030211;
    width: 110px;
}

.display-table-container table tbody tr td:first-child
{
    color: #030211;
    font-weight: bold;
    padding: 1rem 0 1rem 1.2rem;
    text-align: left;
}

.display-table-container table tbody tr td:last-child
{
    background: #B4DBF7;
    border-bottom: 1px solid #fff;
    color: #030211;
    font-weight: bold;
}

.display-table-container table tfoot tr td
{
    background: #B4DBF7;
    color: #030211;
    font-weight: bold;
    border-right: 1px solid #fff;
    font-size: 0.75rem;
    padding: 1rem 1rem 1rem 0;
    text-align: right;
    line-height: 1.0;
    width: 110px;
}

.display-table-container table tfoot tr td:first-child
{
    padding: 1rem 0 1rem 1.2rem;
    text-align: left;
}

.display-table-container table thead tr th:first-child,
.display-table-container table tbody tr td:first-child,
.display-table-container table tfoot tr td:first-child
{
    width: 140px;
}


/* .display-table-container table tbody tr td:first-child
{
    text-transform: capitalize;
} */

.display-table-container table thead tr th:last-child
{
    width: 200px;
    text-align: right;
    border-bottom: 1px solid #fff;
    padding-right: 1rem;
}

.display-table-container table tbody tr td:last-child,
.display-table-container table tfoot tr td:last-child
{
    width: 200px;
    text-align: right;
    border-bottom: 1px solid #fff;
    padding-right: 1rem;
}

.display-table-container table tfoot tr td:last-child
{
    border-bottom: none;
}

.display-table-container table tbody tr:nth-child(odd) {
    background-color: #EDEDED;
}

/*** grouped table CSS ***/
.display-table-container.groupedBar table thead tr th:last-child
{
    width: 110px;
    border-bottom: unset;
    border-right: unset;
}

.display-table-container.groupedBar table tbody tr td:last-child
{
    width: 110px;
    text-align: right;
    border-bottom: unset;
    padding-right: 1rem;
}

.display-table-container.groupedBar table tbody tr td:last-child
{
    background: unset;
    border-bottom: unset;
    color: #030211;
    font-weight: normal;
}

.display-table-container.groupedBar table tfoot tr td:last-child
{
    width: 110px;
    border-bottom: none;
    border-right: unset;
}

.display-table-container.groupedBar table
{
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  border: none;
  width: 100%;
  border: 1px solid #D6D6D6;
}


.display-chart-progress
{
    padding-top: 1.5rem;
}

.progressColumnTitle.accordion-title
{
    display: none;
}

/* .display-chart-container > div
{
    flex-grow: 1;
} */

.chart-block
{
    float: left;
    /* padding: 0 1rem; */
    font-family: var(--base-font-family);
}

.chart-block.pie
{
    width: 300px;
}

.chart-block.pie .legendContainer
{
    width: 40%;
}

/* .chart-block.pie .highcharts-root
{
    width: 60%;
} */

.chart-block.donut
{
    height: 220px;
    /* width: 50%; */
}

.chart-block.donut .highcharts-container,
.chart-block.donut .highcharts-container .highcharts-root
{
    width: 415px !important;
}

/* .highcharts-root {
  display: flex;
  width: 100%
} */

/* .chart-block.groupedBar
{
    height: 260px;
} */

.chart-block.pageWidthChart
{
    height: 350px;
}

.display-totals-container
{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border-top: 1px solid var(--light-background); */
    padding: 1rem 1rem 1.2rem 1rem;
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.totalLabel
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.totalLabel:first-child
{
    margin-bottom: 0.4rem;
}

.totalValue
{
    font-size: 1.125rem;
    padding: 0 0.6rem;
}

.display-cta-bar
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid var(--light-background);
    padding: 0.8rem var(--single-gutter-padding);
    font-size: var(--base-cta-font-size);
    min-height: 48px;
}

/*** tier overlay css ***/
.chart-block.pie .tierOverlay
{
    min-height: 230px;
    width: 100%;
}

.chart-block.simpleBar .tierOverlay,
.chart-block.groupedBar .tierOverlay,
.chart-block.stackedBar .tierOverlay
{
    min-height: 350px;
}

.display-chart-container .tierRestrictMessage
{
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1.14px;
}

.display-chart-container .tierOverlay .tierIcon.lockIcon
{
  margin-bottom: 1rem;
}

/*** END tier restrict overlay css ***/

.chart-dev-info
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--light-background);
    padding: 0.8rem var(--single-gutter-padding);
    font-size: var(--base-cta-font-size);
    min-height: 48px;
    background-color: #ccc;
    color: #030211;
}

.chart-dev-info span
{
    display: inline-block;
    padding: 0 1rem;
}

.chart-dev-info span span
{
    display: inline-block;
    padding: 0 0.4rem;
    background-color: #e3e3e3;
}

/* .chartBlockMessage
{
    flex-grow: 1;
} */

/* .ctaSpacer
{
    flex-grow: 2;
} */

.downloadLink
{
    margin-left: 2rem;
}

.small-data-set .downloadLink
{
    margin-left: 2rem;
    flex-grow: 1;
}

.linkBlock
{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-grow: 1;
}

.linkBlock:empty
{
    display: none;
}

.linkBlock a.standardLink
{
    padding: 0 1rem;
}

.linkBlock a.standardLink:last-child
{
    padding-right: 0;
}

.standardLink.iconAfter i
{
    padding-right: 0;
}

/*** chart overlay ***/
.tierOverlay
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    padding: 0 1rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 2.18rem;
    font-size: 1.375rem;
    top: 0;
    left: 0;
}

/* .tierOverlay.chartTierOverlay
{
    width: calc(100% - var(--double-gutter-padding) );
} */

.hasOverlay
{
    position: relative;
    /* padding-left: 0;
    padding-right: 0; */
}

.tierOverlay h2
{
    font-size: 1.875rem;
    line-height: 2.6rem;
    text-transform: none;
    font-weight: 600;
}

.tierOverlay .tierIcon
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 1.6rem;
    background-color: #fff;
    border-radius: 100%;
    border: 2px solid #000;
    width: 72px;
    height: 72px;
    font-weight: 600;
    font-size: 2rem;
}

/* .tierOverlay .tierIcon.lockIcon
{
    margin-bottom: 1.6rem;
}

.tierOverlay .tierIcon.lockIcon::before
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    content: '\f023';
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 2rem;
    height: 70px;
    width: 73px;
} */

/* .tierOverlay .universalMessage
{
    text-align: center;
    width: 60%;
} */

.tierRestrictMessage
{
    display: none;
    flex-direction: column
}

.chart-block.smallChart .tierOverlay .universalMessage
{
    text-align: center;
    width: 100%;
}

.tierOverlay .universalMessage h2
{
    line-height: 1.5;
}

.tierOverlay p
{
    margin: 0;
}

#premier-value-bar .tierOverlay
{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
}

#premier-value-bar .tierOverlay .tierIcon.lockIcon::before
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    content: '\f023';
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 1rem;
    height: 30px;
}

#premier-value-bar .tierOverlay .tierIcon
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 1rem 0 0;
    background-color: #fff;
    border-radius: 100%;
    border: 2px solid #000;
    width: 40px;
    height: 40px;
}

/*** chart tier overlay css ***/
.tierOverlayRendered .display-subtitle,
.tierOverlayRendered .misc-block
{
    display: none;
}

/*** premier progress tierOverlay ***/
.eligibilityProgress .tierOverlay
{
    align-items: flex-start;
    /* justify-content: center;
    flex-direction: column;
    background-color: #241ED6;
    height: 100%; */
}

.eligibilityProgress .tierOverlay h2
{
    font-weight: 600;
    font-size: 2.0rem;
    line-height: 1.2;
    letter-spacing: 1.14px;
    margin-bottom: 0.5rem;
    color: white;
}

.eligibilityProgress .tierOverlay h3
{
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 1.14px;
    margin-bottom: 1rem;
    color: white;
}

.eligibilityProgress .tierOverlay .tierRestrictMessage
{
    text-align: left;
    width: 90%;
    font-size: 1.0rem;
    line-height: 1.5;
    letter-spacing: 0.8px;
    padding: 0 0 0 3rem;
    color: white;
}

/*** tierOverlay backgrounds ***/
.noBkgd
{
    background: none;
}

.fullWidthDonut
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.fullWidthBar
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.smallWidthBar
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.mediumWidthBar
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.smallWidthDonut
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.mediumWidthDonut
{
    background-image: url('/dam/jcr:9053d21e-86d4-4bbf-bdb5-dbff2ba6ce0e/backgrounds/tierLockedChartImage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.visionBackground
{
    background-image: url('/dam/jcr:2bb2b0e9-3064-414e-bad1-6a4c9d8c64aa/backgrounds/vision-background-200.png');
    background-size: auto auto;
    background-repeat: repeat;
    border: 1px solid var(--light-background);
}

.blurBackground
{
    background-image: url('/dam/jcr:de77b959-883e-48ab-b5c4-495a8d5a7978/backgrounds/blur-background.png');
    background-size: auto auto;
    background-repeat: repeat;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid var(--light-background);
}

.greyBlurBackground
{
    background-image: url('/dam/jcr:79090318-f8fe-42d6-b684-c2b64b3b1737/backgrounds/dark-grey-background.png');
    background-size: auto auto;
    background-repeat: repeat;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid var(--light-background);
}

.visionBackground .tierRestrictMessage,
.visionBackground .tierRestrictMessage h2,
.visionBackground .tierRestrictMessage h3,
.visionBackground .tierRestrictMessage h4
{
    color: white;
}

.visionBackground .tierRestrictMessage strong
{
    font-size: 1.2rem;
    margin-top: 1rem;
    color: white;
}

.visionBackground .tierRestrictMessage a
{
    display: inline-block;
    color: white;
}

.visionBackground .tierRestrictMessage a.topMarginLink
{
    margin-top: 1rem;
}

.tierMarqueePadding
{
    /* padding: 6vh 10vw;
    overflow: hidden; */
    text-align: center;
}

.hideElementBlock
{
    display: none;
}

.display-chart-container .tierOverlay
{
    border: none;
}

/*** YOY css ***/
.yoyBlock
{
    margin: 0 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.0;
    /* flex-grow: 1; */
}

.increaseArrow::before
{
    display: inline-block;
    content: ' ';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* border-top: 10px solid #000; */
    border-bottom: 12px solid #000;
    /* border-bottom: 14px solid #12B349; */
    margin-right: 0.2rem;
}

.decreaseArrow::before
{
    display: inline-block;
    content: ' ';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* border-top: 10px solid #E02020; */
    border-top: 10px solid #000;
    margin-right: 0.2rem;
}

/*** scrollable legend ***/
.chart-block .legendContainer
{
    position: relative;
    overflow-y: auto;
    width: 205px;
    max-height: 210px;
    padding: 0;
    border: 1px solid transparent;
}



.chart-block .legendContainer::-webkit-scrollbar
{

    background-color: #ccc;
    border-radius: 3px;
    width: 6px;
}

.chart-block .legendContainer::-webkit-scrollbar-thumb
{
    background-color: grey;
    border-radius: 3px;
    border: 5px solid blue;
}

.chart-block .legendContainer::-webkit-scrollbar-thumb:vertical
{
    height: 6px!important;
    width: 10px;
}

.chart-block .highcharts-legend-item
{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--text-color);
    padding: 4px 0;
    position: relative;
    font-weight: bold;
}

.chart-block .legend-symbol
{
    position: relative;
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
    border-radius: 100%;
    border: none;
}

.chart-block .legend-label span
{
    min-width: 49px;
    display: inline-block;
}

/*** graph table switch css ***/
.switchContainer
{
    margin-left: 2rem;
}

.switch-paddle
{
    background: transparent;
    border:1px solid #979797;
    border-radius: 8px;
}

.switch.tiny
{
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    height: 0.875rem;
    align-items: center;
}

.switch.tiny .switch-paddle
{
    width: 3rem;
    height: 0.875rem;
    margin: 0 0.5rem;
}

.switch-active, .switch-inactive {
    position: relative;
}

input:checked + label > .switch-active,
.switch-active
{
    display: block;
    left: unset;
    color: #030211;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1;
}

input:checked + label > .switch-inactive,
.switch-inactive
{
    display: block;
    right: unset;
    color: #030211;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1;
}

.switch.tiny .switch-paddle::after
{
    top: 0;
    left: 0;
    width: 1.3rem;
    height: 0.8rem;
    background: #3A60FF;
    border-radius: 8px;
}

input:checked ~ .switch-paddle
{
    background: transparent;
    border:1px solid #979797;
}


/*** Eligibility Block CSS ***/
/* .eligibilityDashboard .container
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 29px;
    grid-template-areas: "
        componentTitle componentTitle
        eligibilityCurrentStatus eligibilityProgress
    ";
} */

.eligibilityDashboard .container {
    display: grid;
    grid-template-columns: 375px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    /* grid-row-gap: 12px; */
}

/* .componentTitle { grid-area: 1 / 1 / 2 / 3; } */
.eligibilityCurrentStatus { grid-area: 1 / 1 / 2 / 1; }
.eligibilityProgress { grid-area: 1 / 2 / 2 / 2; }


.eligibilityDashboard .container .columnTitle h4,
.eligibilityDashboard .container .columnTitle span,
#purchasing-section-header .title-container .columnTitle h4,
#purchasing-section-header .title-container .columnTitle span
{
    display: inline-block;
    /* padding-right: 0.6rem; */
}

.eligibilityDashboard .container .columnTitle span
{
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.07px;
    margin-bottom: 0;
}

.eligibilityDashboard .container .columnTitle span.dynamicHeaderElement,
#purchasing-section-header .title-container .columnTitle span.dynamicHeaderElement
{
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.15px;
    margin-bottom: 0;
    padding: 0 0.5rem 0 0.4rem;
}

#purchasing-section-header .title-container .columnTitle
{
    padding-bottom: 0;
}

.eligibilityCurrentStatus
{
    /* grid-area: eligibilityCurrentStatus;
    grid-column: 1 / 1; */
    /* grid-row: 1/span 3; */
    display: flex;
    flex-direction: column;
}

/* .eligibilityTierBenefits
{
    grid-area: eligibilityTierBenefits;
    grid-column: 1 / 1;
    grid-row: 4/span 3;
    display: flex;
    flex-direction: column;
} */

.eligibility-component
/*.eligibility-rewards-component */
{
    height: 100%;
    position: relative;
    overflow: hidden;
    /* display: flex;
    justify-content: flex-start;
    align-items: center; */
}

/* .premierValue {
    grid-area: premierValue;
    grid-column: 2 / 2;
    grid-row: 1/span 1;
    padding-bottom: 0;
} */

.eligibilityProgress
{
    /* grid-area: eligibilityProgress;
    grid-column: 2 / 2; */
    /* grid-row: 2/span 5; */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    background: white;
}

.eligibility-container
{
    display: flex;
    flex-direction: column;
    /* jjh border: 1px solid var(--light-background); */
    /* padding: 1rem 0 0; */
}

/* jjh
.eligibility-rewards-container
{
    height: 416px;
}
*/
.eligibility-container
{
    margin-bottom: 0;
    padding-top: 0;
    /* padding-bottom: 2rem; */
    height: 100%;
}

.status-summary-block
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: 100%;
}

.summary-block {
    word-break: break-word;
}

/* .eligibilityProgress .columnTitle {
    display: inline-flex;
    flex-direction: row;
} */

.eligibilityProgress .tooltipIcon.has-tip {
    display: inline-block;
    /* top: -3px; */
}

.eligibilityProgress > div.tooltipIcon.has-tip {
    margin-left: -10px;
}

.tierBlock
{
    padding: 1rem 0.5rem 1rem 1rem;
    background-color: #F6F6F6;
}

.currentTierBlock {
    background-color: #fff;
    border: 1px solid #BEBEBE;
    width: 100%;
}

.status-summary-block .vertical-divider::before
{
    display: inline-block;
    height: 60px;
}

.statusLabel
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.statusLabel h2
{
    text-transform: none;
    font-size: 1.5rem;
    letter-spacing: 0.12px;
}

.summary-container
{
    display: flex;
    justify-content: center;
}

.tierBlock .summaryLink
{
    display: flex;
    justify-content: center;
    font-size: 0.875rem;
}

.tierBlock .summaryLink .standardLink
{
    justify-content: flex-end;
}

.status-summary-block .vertical-divider
{
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* .currentTier {
    text-transform: capitalize;
    font-size: 1.375rem;
    line-height: 2.4rem;
    font-weight: bold;
}

.nextTier {
    text-transform: capitalize;
    font-size: 1.375rem;
    line-height: 2.4rem;
    font-weight: 400;
} */

.currentTier::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: var(--premier-color);
    font-size: 1.25rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

.goldTier .currentTier::after
{
    color: var(--premier-color);
}


.right-arrow::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    content: "\f105";
    color: var(--link-text-color);
    font-size: 0.75rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

.right-arrow:visited::after
/* .fa-angle-right:visited::after
.fa-angle-right:visited::before { */
{
    color: var(--section-link-default-visited);
}



.networkTier .currentTier::after
{
    color: var(--text-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-style: normal;
    content: '\f023';
    border: 2px solid #000;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    margin: 0 0.5rem;
    padding-left: 0;
    font-size: 1rem;
}

.silverTier .currentTier::after
{
    color: var(--premier-color);
}

.summaryLink.reviewPurchaseLink
{
    display: flex;
    justify-content: center;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.eligibilityMessage
{
    font-size: 0.875rem;
    /* text-align: center; */
    margin-top: 0.5rem;
}

.statusMessage
{
    display: none;
    justify-content: center;
    align-items: center;
}

.statusMessage p
{
    color: #F5292E;
    font-size: 0.875rem;
    letter-spacing: 0.07px;
    line-height: 19px;
    text-align: center;
    flex-basis: 70%;
    margin-bottom: 0;
}

.currentTierBlock.networkTier {
    border-left: 6px solid var(--text-color);
}

.currentTierBlock.silverTier {
    border-left: 6px solid var(--premier-color);
}

.currentTierBlock.goldTier {
    border-left: 6px solid  var(--premier-color);
}

.currentTierBlock.platinumTier {
    border-left: 6px solid var(--premier-color);
    /* width: 100%;
    text-align: center; */
}

.tierBlock.nextTierBlock.platinumTier .summaryLink {
    justify-content: flex-start;
}

.tierBlock.platinumTier .summaryLink {
    justify-content: center;
}

.progressChart
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progressChart {
    margin: 2rem 0 1.75rem 0;
    font-size: 0.875rem;
}

.progressChart .checkInProgressBarChart
{
    margin: 0.4rem 0;
}

.checkInDateRange
{
    letter-spacing: 1px;
}

.checkInProgressBarLabel
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    letter-spacing: 1px;

}

.checkInDaysLeft
{
    font-weight: 600;
    font-size: 1.5rem;
    padding: 0 0.5rem;
}

.next-tier-rewards-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0 1rem;
}

.column-flex-container .componentTitle,
.column-flex .columnTitle p {
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.column-flex-container .column-flex .columnTitle p
{
  padding-bottom: 0;
}

.column-flex-container .componentDesc p
{
  font-weight: normal;
  text-transform: none;
}

/*** eligibility icons ***/

/* .iconImage i
{
    padding: 0;
    width: 39px;
    height: 39px;
    background-color: #D6D6D6;
    border-radius: 100%;
    font-size: 1.125rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.0;
}

.iconImage i::before
{
    color: #8C8C8C;
    font-weight: 800;
} */

/*** premier value bar icon ***/
#premier-value-bar.section-color-background3 .iconImage i {
  padding: 0;
  width: 39px;
  height: 39px;
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 100%;
  font-size: 1.125rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.0;
  color: var(--section-link-inverse);
}

#premier-value-bar.section-color-background3 .iconImage i::before
{
    color: var(--section-link-inverse);
    font-weight: 800;
}

#premier-value-bar.section-color-background3 .standardLink.iconAfter i,
#premier-value-bar.section-color-background3 .standardLink.iconAfter i::before
{
    color: var(--section-link-inverse);
}

.dateMenu a.standardLink.htmlRadio,
.dateMenu a.standardLink.htmlRadio:hover,
.dateMenu a.standardLink.htmlRadio:active,
.dateMenu a.standardLink.htmlRadio:visited
{
    color: var(--section-link-inverse);
}

.next-tier-rewards-block .cardGrid
{
    margin-top: 1.4rem;
}

.next-tier-rewards-block .cardGrid.unlock-access {
    margin-top: 0;
}



.next-tier-rewards-block .blockGrid3.cardGrid .columnBlockContainer,
.next-tier-rewards-block .blockGrid3.cardGrid .innerColumnBlock,
.next-tier-rewards-block .blockGrid3.cardGrid .imageBlockContainer
{
    padding: 0;
}

/* .next-tier-rewards-block .blockGrid3.cardGrid .imageBlockContainer
{
    margin-top: 0.2rem;
    margin-bottom: 0.7rem;
} */


/* .next-tier-rewards-block .cardGrid.silverBenefits
{
    max-width: 23rem;
} */

.next-tier-rewards-block .paragraphContainer p
{
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.23px;
    margin-bottom: 0;
}

.next-tier-rewards-block .cardGrid .columnBlock
{
    padding-top: 0;
}

.infoGraphic
{
    display: flex;
    justify-content: center;
}

.mainBar
{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-grow: 2;
    background: #fff;
    border-radius: 100%;
}

.halfBar {
    border-top: 3px dashed var(--premier-color);
    height: 4px;
    flex-grow: 1;
    border-color: var(--premier-color);
    padding: 0;
}

.whiteBar
{
    border-color: #fff;
}

.tierIndicator
{
    position: absolute;
    z-index: 2;
    top: 15px;
    border: 2px solid var(--premier-color);
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: #fff;
}

.tierMet
{
    border: 1px solid var(--premier-color);
    border-color: var(--premier-color);
    background-color: var(--premier-color);
}

.tierNextDashed
{
    border-top: 3px dashed var(--premier-color);
    height: 3px;
    flex-grow: 1;
    border-color: var(--premier-color);
    padding: 0;
    /* margin-left: 2px; */
}

.progressColumnTitle
{
    text-align: center;
    margin: 1.5rem 0 0 0;
    font-weight: 600;
    font-size: 1rem;
    color: #030211;
    letter-spacing: 1px;
}

.currentSpend,
.progressBarChart
{
    display: none;
}

.progressColumn .currentSpend,
.progressColumn .progressBarChart
{
    display: block;
}

/*** target column css ***/

.tierColumn
{
    flex-basis: 25%;
    font-size: 0.875rem;
    color: #595959;
}

.targetColumn {
    padding-left: 1rem;
    padding-right: 1rem;
}

.display-progress-column .tierColumn {
    border-right: 1px solid #ccc;
}

.display-progress-column .tierColumn.platinumProgress {
    border-right: 0;
}

.targetBlock
{
    min-height: 100px;
}

.targetColumn.progressColumn
{
    color: #030211;
}

.targetColumn.progressColumn .targetMinimum
{
    font-size: 0.75rem;
    color: #595959;
}

.targetColumn.progressColumn .progressBarChart
{
    margin-left: -10px;
}

/*** convenience targets css ***/

.retinalImagining,
.freeFittings,
.exclusiveOffers
{
    display: none;
}

.retinalImagining::before,
.freeFittings::before,
.exclusiveOffers::before
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-style: normal;
    content: '\f00d';
    color: red;
    font-size: 0.875rem;
    text-align: center;
    display: inline-block;
    padding-right: 0.55rem;
    /* width: 18px; */
}

.targetMet::before
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-style: normal;
    content: '\f00c';
    color: #12B349;
    padding-right: 0.55rem;
}


/*** block grid css ***/

/* .blockGrid3.columnGrid .columnBlockContainer .imageBlockContainer
{
    border: 1px solid #D6D6D6;
} */

/* .blockGrid3.columnGrid .captionBlockContainer .paragraphBlock
{
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
} */

.captionBlockContainer h3 {
    margin-bottom: 0.5rem;
}

.blockGrid3.columnGrid .columnBlock .linkContainer .standardLink {
    align-items: flex-start;
    justify-content: flex-end;
    /* font-size: 0.875rem; */
}

.vspnetworkBenefits.blockGrid3 .paragraphBlock .linkContainer {
    margin: 0 auto;
}

.vspnetworkBenefits .linkContainer i,
.vspnetworkBenefits .socialLinkContainer i {
    font-size: 1rem;
}

.linkContainer .fa, .linkContainer .far, .linkContainer .fab, .linkContainer .fas,
.linkContainer .fal, .quickLinks .fa, .quickLinks .far, .quickLinks .fab,
.quickLinks .fas, .linkContainer .fal {
    padding: 0 0.8rem;
}

/* JJH - this is to override what's coming from button-links.css file */
.linkContainer .fa, .linkContainer .far, .linkContainer .fab, .linkContainer .fas, .linkContainer .fal,
.quickLinks .fa, .quickLinks .far, .quickLinks .fab, .quickLinks .fas, .linkContainer .fal {
    width: auto;
}

.columnBlock .linkContainer .standardLink {
    text-align: unset;
}


.stacked-info-graphic-component
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.graphic-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.graphicComponentTitle
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.graphic-container.cardBorder
{
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
    padding: 1rem 1.5rem;
}

#premierEdgeStatusInfoGraphic,
#nonpremierMemberStatus
{
    display: none;
}

.pecaaNew,
.pecaaMember,
.pecaaNonMember
{
    display: none;
}

.statusShow
{
    display: initial;
}

.dataInfo
{
    font-family: Nunito Sans;
    font-weight: 700;
    font-size: 39px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;

    color: #3A60FF;

}

.dataInfoLabel
{
    font-family: Open Sans;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.0;
    letter-spacing: 0.12px;
    text-align: center;
    margin-bottom: 0.6rem;
}

.nonPecaaInfoLabel,
#nonPecaaMonthlyPoints .dataInfoLabel,
#nonPecaaYearlyPoints .dataInfoLabel
{
    font-size: 0.875rem;
    line-height: 1.3;
}

.dataAlternateLabel
{
    display: flex;
    flex-direction: row;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.12px;
    margin-bottom: 0.4rem;

}

.dataAlternateLabel .premier-edge-status,
.dataAlternateLabel .premier-network-status
 {
  margin-right: 0;
  font-weight: 700;
  color: var(--vsp-blue-black);
  letter-spacing: 1.14px;
  font-size: 1rem;
}

.dataAlternateLabel .premier-edge-status.locked::after
{
  padding-top: 0.4rem;
  padding-left: 0.1rem;
  height: 34px;
  width: 34px;
}

.dataDateRange
{
    font-family: Open Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.12px;
    text-align: center;

}

.blockGrid3.columnGrid .imageBlockContainer
{
    margin-bottom: 0.7rem;
}

.blockGrid3.columnGrid .standardLink.iconAfter i {
    font-size: 0.875rem;
}

.pecaDataSpread .spreadCol2
{
    display: flex;
    flex-direction: row;
}

.pecaaDataPoints
{
    width: 22%;
}

.pecaaDataPoints .dataInfoLabel
{
    font-size: 0.875rem;
}

.pecaaDataPoints.pecaaVisionRebates
{
    width: 35%;
    margin: 0 0.5rem;
}

.pecaaDataPoints.pecaaVisionRebates .graphicComponentTitle h4
{
    letter-spacing: 0.07px;
}

/*** card info component CSS ***/


/* .card-grid-component .card-info-container
{
    position: relative;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1.2rem 0;
    color: var(--vsp-blue-black);
    height: 100%;
} */

.card-grid-component .card-info-container
{
    position: relative;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1.2rem 0;
    color: var(--vsp-blue-black);
}

.card-grid-component .card-info-block
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 12px;
    grid-row-gap: 18px;
    background-color: white;
    margin: 0 1rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 720px;
}

.card-grid-component .card-info-container .card-info-block .statusMessaging,

{
    display: none;
}

.logoImageBlock { grid-area: 1 / 1 / 2 / 4; }

.totalsBlock { grid-area: 1 / 4 / 2 / 7; }
.cardStatRow { grid-area: 2 / 1 / 3 / 7; }
.statusMessaging { grid-area: 2 / 1 / 4 / 7; display: none; }

.logoImageBlock .image
{
    margin-bottom: 0.3rem;
}

.totalsBlock
{
    text-align: right;
}

.card-info-block .logoImageBlock .image img
{
    width: 130px;
}

.cardStatRow
{
    display: flex;
    flex-direction: row;
    gap: 15px;

}

.cardStat1,
.cardStat2,
.cardStat3
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1;
}

.totalsTitle
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.11px;
    color: inherit;
    line-height: 1.0;
    margin-bottom: 0.6rem;
}

.totalCardValue
{
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.11px;
    color: inherit;
    line-height: 1.0;
}


.totalsCaption
{
    font-size: 0.875rem;
    letter-spacing: 0.11px;
    color: inherit;
    line-height: 1.0;
}

.statValue
{
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.11px;
    color: inherit;
    margin-bottom: 0.4rem;
}

#marchonAltairCardContainer .statValue
{
    font-size: 3.125rem;
}

.statCaption
{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.11px;
    color: inherit;
}

#marchonAltairCardContainer .statCaption
{
    font-size: 1.25rem;
}

.logoImageBlock .image_caption p
{
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.12px;
    line-height: 1.0;
    margin: 1rem 0 0.5rem 0;
}

.statusMessaging
{
    text-align: center;
}

.statusMessaging h2
{
    text-transform: none;
    line-height: 1.3;
}

.statusMessaging p
{
    margin-bottom: 0.2rem;
}

.statusMessaging .linkContainer .standardLink
{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

.statusMessaging .linkContainer,
.statusMessaging .linkContainer .standardLink
{
    margin: 0;
}

.card-info-block.lockedCard
{
    grid-template-rows: auto 0px auto;
}

.card-info-block.lockedCard .cardStatRow
{
    display: none;
}

.card-info-block.lockedCard .totalsBlock
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.card-info-block.lockedCard .totalsBlock::after
{
    display: block;
    color: var(--text-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f023';
    border: 2px solid #000;
    border-radius: 100%;
    height: 72px;
    width: 72px;
    margin: 0;
    padding: 0.2rem 0.95rem 0 0rem;
    font-size: 2.5rem;
}

.rewardsPageHeader .paragraphEyebrow
{
    font-size: 3.125rem;
    font-weight: 700;
    letter-spacing: 0.12px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0;
}

.rewardsPageHeader .paragraphCopy p
{
    font-size: 1rem;
    font-family: var(--alternate-font-family) !important;
}

#unityCard .statusMessaging
{
    text-align: left;
}

#unityCard .statusMessaging .linkContainer .standardLink
{
    justify-content: flex-end;
}

.hideRow
{
    display: none;
}

#marchonHistoricalDataSection
{
    display: block;
}

#marchonHistoricalDataSection .card-grid-component .card-info-block
{
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr);*/
    grid-template-rows: 55% auto;
    /* grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 12px;
    grid-row-gap: 18px;
    background-color: white;
    margin: 0;
    padding: 1.75rem;
    width: 100%;
    max-width: 720px; */
    height: 100%;
}

#marchonHistoricalDataSection .card-grid-component .card-info-container
{
    position: relative;
    background-color: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1.2rem 0;
    color: var(--vsp-blue-black);
    height: 100%;
    border: 1px solid var(--light-background);
    padding: 0;
}

#marchonAltairCardContainer .logoImageBlock {
  display: grid;
  flex-direction: row-reverse;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;

  grid-area: 1 / 1 / 2 / 7;
  text-align: center;
}

#marchonAltairCardContainer .logoImageBlock .image {
  grid-area: 1/2;
}

#marchonAltairCardContainer .logoImageBlock .cardDateRange {
  grid-area: 1/1;
  text-align: start;
}

#marchonAltairCardContainer .totalsBlock {
  grid-area: 1 / 4 / 2 / 4;
}

#marchonAltairCardContainer .cardStatRow {
  grid-area: 2 / 1 / 3 / 7;
}

#marchonAltairCardContainer .statusMessaging {
  grid-area: 2 / 1 / 4 / 7;
  display: none;
}

#marchonHistoricalDataSection .container
{
    display: flex;
}

#marchonHistoricalDataSectionPecaaNonmember .container
{
    display: flex;
    flex-direction: column;
}

#marchonAltairCardContainer.card-info-block .logoImageBlock .image img {
    width: 250px;
}

#marchonAltairCard,
#marchonAltairCard .row
{
    height: 100%;
    display: block;
}

#marchonHistoricalDataSection .row .row
{
    margin: 0;
}

/*** rebate css ***/
#rebatesSummary {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 16px;
    min-height: 300px;
}

.rebate-summary-container.featured {
    grid-area: 1 / 1 / 3 / 4;
}

.rebate-summary-container.block2 {
    /*grid-column-start: 4;
    grid-column-end: 6;*/
    grid-area: 1 / 4 / 2 / 9;
}
.rebate-summary-container.block3 {
    /* grid-column-start: 6;
    grid-column-end: 9; */
    grid-area: 1 / 9 / 2 / 14;
}

#totalMarchon {
    grid-area: 2 / 4 / 3 / 6;
}

#totalAltair {
    grid-area: 2 / 6 / 3 / 8;
}

#totalUnity {
    grid-area: 2 / 8 / 3 / 10;
}

#totalHoya {
    grid-area: 2 / 10 / 3 / 12;
}

#totalZeiss {
    grid-area: 2 / 12 / 3 / 14;
}

.rebate-color-block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5rem;
    height: 100%;
}

.rebate-summary-container .misc-block
{
    position: absolute;
    bottom: 12px;
    right: 15px;
}

.rebate-summary-container.featured .display-title {
    font-size: 0.875rem;
    font-weight: 800;
    /* text-transform: uppercase; */
    color: #030211;
    letter-spacing: 1px;
    line-height: 19px;
    margin-bottom: 0.3rem;
}

.rebate-summary-container .summaryData .rebateValue {
    font-size: 1.3125rem;
    font-weight: 600;
}

#featuredBlock.rebate-summary-container .summaryData .rebateValue {
    font-size: 2rem;
}

.rebatePeriod {
    font-size: 1.125rem;
}

#featuredBlock.rebate-summary-container .summaryData .rebatePeriod {
    font-size: 1.25rem;
}

/* #totalMarchon .summaryData .rebateValue,
#totalAltair .summaryData .rebateValue,
#totalUnity .summaryData .rebateValue
{
    font-size: 1.5rem;
    font-weight: 800;
} */

/*** resource CSS ***/

.resourceBlock .iconImage
{
    margin: 0 1.5rem;
    width: 30%;
}

.resourceBlock .iconImage i
{
    padding: 0;
    color: #333;

}

.resourceBlock .iconImage.circularBorder
{
    border: 1px solid #333;
    border-radius: 100%;
    width: auto;
    height: auto;
    padding: 1.3rem;
}

.resourceBlock {
    padding-top: 3rem;
}

.resourceBlock h3 {
    font-size: 1rem;
    margin: 1rem 0 1.5rem;
    position: absolute;
    top: 7%;
}

.resourceBlock p {
    font-size: 0.875rem;
}

.resourceBlock a {
    font-size: 0.875rem;
}

.headerBlock {
    position: relative;
}

.ndtHeaderParagraph .headerBlock
{
    position: relative;
    float: left;
    width: 100%;
}

.paragraphBlock.rightAlignment .iconImage {
    margin-top: 2.675rem;
}


/* section.pageBodyRow aside.mainSidebar > div .paragraphBlock.column
{
  padding-left: var(--double-gutter-padding);
  padding-right: var(--double-gutter-padding);
} */

/*** premier banner css ***/

.premierBanner .paragraphBlock
{
    border: 2px solid var(--section-color-bkgd3);
}

.premierBanner .iconImage i
{
    font-weight: 200;
    font-size: 3.5rem;
}

/* JJH 011924 need to override this foundation rule to get the codefield not to float and break the footer*/
section.code-field.column {
    float: none !important;
}


/*** utility css for dashboard ***/

.margin-single-padding
{
    padding-left: var(--single-gutter-padding);
    padding-right: var(--single-gutter-padding);
}

.margin-double-padding
{
    padding-left: var(--double-gutter-padding);
    padding-right: var(--double-gutter-padding);
}

.dashboard-bar .largePadding
{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.vertical-divider::before
{
    content: "";
    color: var(--dark-background);
    font-size: 1.2rem;
    border-left: 1px solid #030211;
    display: inline;
    margin: 0 1rem;
}

.component-border
{
    border: 1px solid #D6D6D6;
}

.alignLeft
{
    align-items: flex-start;
}

.alignRight
{
    align-items: flex-end;
}

.alignCenter
{
    align-items: center;
}

.capitalize
{
    text-transform: capitalize;
}

.uppercase
{
    text-transform: uppercase;
}

/*** wait overlay css ***/
.progressOverlay
{
    background-color: #c7c7c7;
    height: 100%;
    width: 100%;
    opacity: 1.0;
    position: absolute;
    top: 0;
    left: 0;
}

section.section-color-background1
{
    margin: 1rem 0;
}

.column-flex.section-color-background1
{
    padding: 1.5rem;
}

.column-flex-container.eligibilityDashboard .container.section-color-background1 {
    padding: 2.3rem 1.5rem;
}

.column-flex-container .container.section-color-background1 {
    padding: 2rem;
}

.marqueePadding
{
    padding: 5vh 10vw;
    overflow: auto;
}

.column-flex.marqueePaddingSmall
{
    padding: 4vh 4vw;
    overflow: auto;
}

.flex-horizontal
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.flex-vertical
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.fa-lock, .fa-graduation-cap, .fa-award, .fa-piggy-bank {
    font-weight: 600;
}

.fa-angle-down:before {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
}

#profileAdmin-title .fa-angle-down:before
{
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 1;
}


/*** benefits css ***/

section p.benefit,
section p.benefit2
{
    /* color: #0069B5; */
    color: #3A60FF;
    cursor: pointer;
    font-size: 1rem;
    padding-left: 1rem;
    display: inline-block;
    margin-bottom: 0;
}

p.benefit::before,
p.benefit2::before
{
    font-family: "Font Awesome 6 Pro";
    content: '\f107';
    font-weight: 500;
    padding-right: 0.8rem;
    display: inline-block;
    color: #3A60FF;
}

p.benefit.benefit-open::before,
p.benefit2.benefit-open2::before {
    content: '\f106';
}

section p.benefitExplanation,
section p.benefitExplanation2,
.valueProgramSummary p.accordionExplanation
{
    display: inline-block;
    font-size: 1rem;
    line-height: 1.4rem;
    padding-left: 2.65rem;
    /* margin-bottom: 0.8rem; */
}

.currentStatus
{
    display: block;
    margin-bottom: -0.2rem;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 0.8rem;
}

.locationCount
{
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.currentStatusLocationBlock
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.premier-progress-component
{
    /* height: 100%; */
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

.premier-progress-component .display-container
{
    padding-top: 0;
    width: 350px;
}

.premier-progress-title
{
    display: flex;
    flex-direction: row;
}

.premier-progress-title .locationCount
{
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    font-weight: 400;
    padding-left: 0.4rem;
}

.termsConditionsLink .linkContainer
{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
}

.termsConditionsLink .linkContainer .standardLink
{
    margin: 0;
}

.termsConditionsLink .linkContainer .standardLink.iconAfter i
{
    line-height: 1.0;
}

.newLogo
{
    display: inline-block;
    background-color: var(--premier-color);
    color: #030211;
    padding: 0.4rem 1rem;
    text-align: center;
    font-weight: bold;
}

.newCriteriaSection .row
{
    max-width: 45rem;
}

/* Styling for the #tierTable on the Premier Overview Page  */

.tiers {
  color: #000;
}

.fa-check::before {
content: "\f00c";
color: #EF6E0B;
font-weight: bold;
font-size: 1.2rem;
}

.dark-check::after
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: #595959;
    font-size: 1.5rem;
    padding-left: 0;
    text-align: center;
    display: inline-block;
}

.orange-check::after
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: #595959;
    font-size: 1.5rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

.pecaaFeature-check::after
{
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    content: '\f00c';
    color: #3A60FF;
    font-size: 1.5rem;
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;
}

/* .fa-check:nth-child(n+2)::before {
    color: RED;
} */

table#tierTable,
table#tierTable2 {
   border: none;
}

table#tierTable .status-set,
table#tierTable2 .status-set,
.responsive.tierTable .status-set {
   position: relative;
}

table#tierTable .status-text,
table#tierTable2 .status-text,
.responsive.tierTable .status-text {
   padding: 0.25rem;
   background: var(--premier-color);
   position: relative;
   color: #fff;
   font-size: 1.1rem;
}

table#tierTable .caret-box,
table#tierTable2 .caret-box,
.responsive.tierTable .caret-box {
   position: absolute;
   left: 25%;
   right: 25%;
   /* margin: 0.1rem 0 0 0; */
}

.caret::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 700;
	  content: "\f0d7";
    color: var(--premier-color);
    font-size: 2.5rem;
    text-align: center;
    line-height: 0;
    height: 1.5rem;
    display: inline-block;
    vertical-align: bottom;
}

table#tierTable2 .status-text.vspnetwork-status,
table#tierTable2 .status-text.premieredgepecaamax-status
{
   background-color: var(--vsp-blue-black);
}

table#tierTable2 .status-text.premier-status
{
   background-color: var(--premier-color);
}

table#tierTable2 .status-text.pecaamax-status
{
   background-color: var(--pecaa-theme-color);
}

table#tierTable2 .vspnetwork-status .caret::after
{
   color: var(--vsp-blue-black);
}

table#tierTable2 .premier-status .caret::after
{
   color: var(--premier-color);
}

table#tierTable2 .pecaamax-status .caret::after
{
    content: "\25be";
    color: var(--pecaa-theme-color);
}

table#tierTable2 .premieredgepecaamax-status .caret::after
{
    color: var(--vsp-blue-black);
}

.statusRow .premier-edge-status.locked::after,
.statusRow .pecaamaxStatus.locked::after,
.statusRow .premieredgepecaamaxStatus.locked::after
{
    height: 40px;
    width: 40px;
    margin: 0 auto;
    font-size: 1.2rem;
}

.mobileTable
{
    margin-bottom: 1px;
}

.mobileTable thead {
    background: #fff;
    border: none;
}

.mobileTable thead tr td
{
    position: relative;
    font-weight: 700;
}

.mobileTable thead tr td::after
{
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -1.2rem;
    margin-right: 0;
    content: "\f107";
    font-size: 1.5rem;
    font-weight: 800;
    font-family: "Font Awesome 6 Pro";
}

.mobileTable thead.is-active tr td::after
{
    content: "\f106";
}

.mobileTable tbody
{
    display: none;
}

table#tierTable
{
    margin-bottom: 0;
}

table#tierTable tr td,
table#tierTable2 tr td,
table#tierTable tr th,
.responsive.tierTable tr td,
.responsive.tierTable tr th {
   font-size: 1.1rem;
   font-weight: normal;
}

table#tierTable tr.header-row td,
table#tierTable2 tr.header-row td,
.responsive.tierTable tr.header-row td {
   font-size: 1.1rem;
   color: #000;
}

table#tierTable tr td
{
    font-size: 1rem;
}

table#tierTable tr td.divider-row
{
    font-weight: 700;
    color: var(--vsp-blue-black);
}

table#tierTable tr,
table#tierTable2 tr,
table#mobileTierTable tr,
table#mobileTierTable2 tr,
table#tierTable3 tr
{
   display: table-row;
   /* border: none; */
}

table#tierTable .status-row,
table#tierTable2 .status-row {
    border:none;
}

table#tierTable thead,
table#tierTable2 thead {
   background: initial;
}

table#tierTable .fa-check,
table#tierTable2 .fa-check {
  font-size: 1.5rem;
  color: var(--green-arrow-color);
}

table#tierTable tbody:first-child,
table#tierTable2 tbody:first-child {
  border: none;
}

table#tierTable thead tr th:nth-child(2),
table#tierTable thead tr th:nth-child(3),
table#tierTable thead tr th:nth-child(4),
table#tierTable2 tbody tr td:nth-child(2),
table#tierTable2 tbody tr td:nth-child(3),
table#tierTable2 tbody tr td:nth-child(4) {
   width: 14%;
}

table#tierTable, table#tierTable thead tr th.full-width,
table#tierTable2, table#tierTable2 thead tr th.full-width,
table#tierTable tbody tr td.full-width,
table#tierTable2 tbody tr td.full-width,
table#tierTable3
{
   width: 100%;
}

table#tierTable3
{
   margin: 0;
}

table#tierTable thead .header-row th,
table#tierTable2 thead .header-row th  {
   font-size: 1.1rem;
   font-weight: bold;
   text-transform: uppercase;
   color: #000;
   border: 1px solid #9fa1a4;
   text-align: left;
}

table#tierTable tbody tr th,
table#tierTable2 tbody tr th {
   text-align: left;
   background: #fff;
   color: #000;
   border: 1px solid #9fa1a4;
}

table#tierTable thead tr.table-row th,
table#tierTable2 thead tr.table-row th,
table#tierTable tbody tr.table-row td,
table#tierTable2 tbody tr.table-row td {
   background-color: #fff;
   text-align: center;
}

table#tierTable tbody tr.table-row td:first-child,
table#tierTable2 tbody tr.table-row td:first-child {
   text-align: left;
}

table#tierTable tbody tr.status-row td,
table#tierTable2 tbody tr.status-row td,
.responsive.tierTable tbody tr.status-row td,
.responsive.tierTable2 tbody tr.status-row td {
   background-color: #fff;
   border: none;
   text-align: center;
   padding: 0;
}

/* table#tierTable tbody tr.status-row td.active-border,
table#tierTable2 tbody tr.status-row td.active-border,
.responsive.tierTable tbody tr.status-row td.active-border,
.responsive.tierTable2 tbody tr.status-row td.active-border {
   border-top: 1px solid #f58220;
   border-left: 1px solid #f58220;
   border-right: 1px solid #f58220;
   border-bottom: none;

} */

table#tierTable tbody tr.header-row td:first-child,
table#tierTable2 tbody tr.header-row td:first-child,
table#tierTable tbody tr.status-row td:first-child,
table#tierTable2 tbody tr.status-row td:first-child {
   width: 600px;
}

table#tierTable thead tr th.premier-cell,
table#tierTable2 thead tr th.premier-cell {
   background-color: #f58220;
   font-size: 1rem;
   position: relative;
}

table#tierTable thead tr th.premier-cell .caret,
table#tierTable2 thead tr th.premier-cell .caret {
   position: relative;
   bottom: 0;
}

table#tierTable tbody tr td,
table#tierTable2 tbody tr td,
table#tierTable3 tbody tr td
{
   padding: 1rem;
}

table#tierTable tr.header-row td,
table#tierTable2 tr.header-row td {
   padding: 0.7rem 0.5rem;
   letter-spacing: 0.6px;
}

table#tierTable td.vspnetwork,
table#tierTable td.silver,
table#tierTable td.gold,
table#tierTable td.platinum,
table#tierTable2 td.vspnetwork,
table#tierTable2 td.silver,
table#tierTable2 td.gold,
table#tierTable2 td.platinum
{
    font-weight: 600;
    width: 14%;
}

table#tierTable tbody tr.table-row.header-row td.vspnetwork,
table#tierTable2 tbody tr.table-row.header-row td.vspnetwork,
table#tierTable2 tbody tr.table-row.header-row td.premieredge,
table#tierTable2 tbody tr.table-row.header-row td.pecaamax,
table#tierTable thead tr.table-row.header-row td.vspnetwork,
table#tierTable2 thead tr.table-row.header-row td.vspnetwork,
table#tierTable2 thead tr.table-row.header-row td.premieredge,
table#tierTable2 thead tr.table-row.header-row td.pecaamax,
#tierTableNetwork thead,
#tierTablePremier thead,
#tierTablePecaaMax thead
{
    color: #fff;
    background-color: #595959;
    text-transform: unset;
    font-weight: 700;
    text-align: center;
}

table#tierTable2 tbody tr.table-row.header-row td.premieredgepecaamax,
table#tierTable2 thead tr.table-row.header-row td.premieredgepecaamax,
#tierTablePremierPecaaMax thead
{
    color: #fff;
    background-color: #3A60FF;
    text-transform: unset;
    font-weight: 700;
    text-align: center;
}

#tierTableNetwork thead tr td,
#tierTablePremier thead tr td,
#tierTablePecaaMax thead tr td,
#tierTablePremierPecaaMax thead tr td
{
    color: #fff;
    border: 1px solid #595959;
}

#tierTablePremierPecaaMax thead tr td
{
    color: #fff;
    border: 1px solid #3A60FF;
}

table#tierTable thead tr th.silver,
table#tierTable tbody tr td.silver,
.responsive.custom-table.tierTable tbody tr th.silver,
table#tierTable2 thead tr th.silver,
table#tierTable2 tbody tr td.silver,
.responsive.custom-table.tierTable2 tbody tr th.silver {
   background-color: #D6D6D6;
}

table#tierTable thead tr th.gold,
table#tierTable tbody tr td.gold,
.responsive.custom-table.tierTable tbody tr th.gold,
table#tierTable2 thead tr th.gold,
table#tierTable2 tbody tr td.gold,
.responsive.custom-table.tierTable2 tbody tr th.gold {
   background-color: #dfb15b;
}

table#tierTable thead tr th.platinum,
table#tierTable tbody tr td.platinum,
.responsive.custom-table.tierTable tbody tr th.platinum,
table#tierTable2 thead tr th.platinum,
table#tierTable2 tbody tr td.platinum,
.responsive.custom-table.tierTable2 tbody tr th.platinum {
   background-color: #ADB9CC;
}

table#tierTable2 .tooltipIcon i.benefits-header-tip::before
{
    color: white;
    background-color: #3A60FF;
}

table#tierTable2 tbody tr td.benefitsHeader
{
    font-weight: 700;
}

.responsive.custom-table.tierTable tr th,
.responsive.custom-table.tierTable tr td,
.responsive.custom-table.tierTable2 tr th,
.responsive.custom-table.tierTable2 tr td {
   background: #fff;
   color: #000;
   text-align: center;
}

.responsive.custom-table.tierTable tr td,
.responsive.custom-table.tierTable2 tr td {
    width: 30%;
}

.responsive.custom-table.tierTable tbody tr th,
.responsive.custom-table.tierTable tbody tr td,
.responsive.custom-table.tierTable2 tbody tr th,
.responsive.custom-table.tierTable2 tbody tr td {
   background: #fff;
   color: #000;
   border: 1px solid #000;
}

table#tierTable .tooltipIcon i::before,
table#tierTable2 .tooltipIcon i::before
{
    display: flex;
    color: #595959;
    font-size: 0.75rem;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background-color: #fff;
    border: none;
    font-weight: 600;
}

table#tierTable .tooltipIcon.status-tip i::before,
table#tierTable2 .tooltipIcon.status-tip i::before
{
    color: var(--premier-color);
}

table#tierTable tbody tr.table-row td.divider-row,
table#tierTable2 tbody tr.table-row td.divider-row
{
    background-color: #f6f6f6;
    text-align: center;
    color: #0B2335;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.6px;
}

table#tierTable tbody tr.table-row td.divider-row,
table#tierTable2 tbody tr.table-row td.divider-row
{
    background-color: #f6f6f6;
    text-align: center;
    color: #0B2335;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.6px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
}

table#tierTable tbody tr td, table tr td p,
table#tierTable2 tbody tr td, table tr td p {
  font-family: 'Nunito Sans', sans-serif;
  color: #0B2335;
  line-height: 1.3;
}

table#tierTable tbody tr td p
{
  line-height: 1.8;
}

/* .vspNetworkHeader,
.vspNetworkHeader2
{
    display: flex;
    align-items: center;
    justify-content: center;
} */

table#tierTable tbody tr td.criteriaHeader
{
    color: white;
    text-transform: capitalize;
    text-align: center;
    background-color: var(--vsp-blue-black);
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.31px;
    text-align: center;
}

table#tierTable tbody tr td.premierCriteriaHeader,
table#tierTable3 tbody tr td.premierCriteriaHeader
{
    color: var(--vsp-blue-black);
    background-color: var(--premier-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.31px;
}

.premierCriteriaHeader .componentTitle
{
    color: var(--vsp-blue-black);
    background-color: var(--premier-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.31px;
    padding: 1rem;
    text-transform: none;
    margin-bottom: 1rem;
}

.premierCriteriaHeader .componentTitle h2
{
    text-transform: none;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.31px;
    color: var(--vsp-blue-black);
}

.premierCriteriaHeader .componentTitle .tooltipIcon i::before
{
    background-color: #fff;
    color: var(--premier-color);
    font-weight: 700;
}

/* END of styling for the #tierTable on the Premier Overview Page  */


/*** PROFILE CSS ***/
/*** account number CSS ***/

.account-number-component .row
{
    max-width: 85rem !important;
}

.account-number-component.twoColumn .row
{
    max-width: 45rem !important;
}

.account-number-component.oneColumn .row
{
    max-width: 85rem !important;
}

/* .account-number-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
    background-color: #fff;
    justify-content: center;
    align-items: top;
} */

#account-number-block .accordion-title {
    padding-left: 4rem;
}

.accordion-title::before
{
    font-size: 1.2rem;
}

#account-number-block .accordion-title:hover,
#account-number-block .accordion-title:focus {
    padding-left: 4rem;
}

.accordion-title h3
{
    margin-bottom: 0;
}

/* JJH 012224 have to override this rogue rule that is breaking accordions using
media components on offers page */
.accordion-content .column:last-child:not(:first-child) {
    float: none;
}

/* .accountColumn
{
    border: 1px solid #ccc;
} */

/* .twoColumn .account-number-wrapper
{
    grid-template-columns: 1fr 1fr;
} */

/* .oneColumn .account-number-wrapper
{
    grid-template-columns: 1fr;
    grid-gap: unset;
} */

/* .accordion-title
{
    font-size: 1rem;
} */

/* .accordion-title .practiceName
{
    padding-bottom: 0.5rem;
} */

/* .account-number-wrapper .accordion-item {
    background-color: #fff;
    padding: 0;
} */

a.practiceLocation
{
    display: block;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    font-weight: 650;
    text-decoration: none;
    color: #030211;
}

.accountNumberList
{
    display: none;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    text-align: center;
    padding: 1rem;
    border-top: 1px solid #ccc;
}

.accordion-item.is-active .accountNumberList
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    text-align: center;
    padding: 1rem;
    border-top: 1px solid #ccc;
}

.oneColumn .accountNumberList
{
    display: none;
    flex-direction: row;
    justify-content: space-evenly;
}

.oneColumn .disabled .accountNumberList,
.oneColumn .is-active .accountNumberList
{
    display: flex;
}


.accountNumberList .numbers
{
    padding-bottom: 1rem;
}

.marchonNumbers,
.altairNumbers,
.vspNumbers
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 0 1rem 0;
}

.lobLogo
{
    width: 110px;
    height: auto;
    padding: 0.5rem 0;
}

.lobLogo.altairLogo img
{
    height: 30px;
}

.lobLogo.vspLogo img
{
    height: 35px;
}

/* .account-number-wrapper .accordion-title:hover,
.account-number-wrapper .accordion-title:focus
{
    background: none;
    padding: 1rem;
    color: #030211;
} */

/* .account-number-wrapper .accordion-title
{
    border-top: none;
    cursor: default;
    background-color: #fff;
} */

/* .account-number-wrapper .accordion-title::before {
    font-size: 1.25rem;
    line-height: 1rem;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -0.5rem;
    font-weight: 800;
    content: '+';
    color: #030211;
} */

/* .account-number-wrapper .is-active > .accordion-title::before {
    content: '-';
    font-size: 1.25rem;
    font-weight: 800;
}

.account-number-component :last-child:not(.is-active) > .accordion-title
{
    border-bottom: none;
} */

/*** accordion disabled css ***/
/* .account-number-wrapper.disabled .accordion-title
{
    border-top: none;
    cursor: default;
}

.account-number-wrapper.disabled .is-active > .accordion-title::before
{
    content: '';
}

.account-number-wrapper.disabled .accordion-title:hover,
.account-number-wrapper.disabled .accordion-title:focus
{
    background: none;
    padding: 1rem;
    color: #030211;
} */

/*** update profile css ***/
#update-profile,
#change-password,
#forgot-password,
#csr-search,
#register-new-user,
#forgot-userid,
#challenge-question,
.errorBlock
{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.errorBlock
{
    display: none;
    padding-top: 1rem;
    padding-bottom: 1rem;

}

.errorHeader
{
    display: flex;
    flex-direction: row;
    font-size: 1.3rem;
    line-height: 1.0;
    align-items: center;
    margin-bottom: 0.5rem;
}

.errorDisplay
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border: 3px solid #bb282e;
    background-color: rgba(187,40,46,.17);
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1rem;
}

.errorMessage li
{
    line-height: 1.5;
}

.infoDisplay
{
    border: 3px solid var(--section-color-bkgd2);
    background-color: transparent;
}

.icon-error
{
    font-size: 1.2rem;
    color: #bb282e;
    padding-right: 0.8rem;
}

.errorMessage ul
{
    margin: 0;
}

.profileParagraph .marqueePadding
{
    padding: 2vh 22vw;
}

.profileParagraph .marqueePadding ul
{
    width: 58%;
    text-align: left;
    margin: 0 auto;
}

/*** registration css ***/
.regMarker
{
    text-align: left;
    padding-left: 1.2rem;
}

.regMarker span.marker
{
    background-color: transparent;
    color: var(--prh-danger-default);
    padding: 0 0 1rem 0;
    margin: 0;
    box-shadow: none;
    display: inline-block;
}

.error
{
    color: var(--prh-danger-default);
}

#csrErrors
{
    color: var(--prh-danger-default);
}

.showError
{
    margin-bottom: 2rem;
    display: block;
}

/*** forgot user id css ***/
#challenge-question-section,
#challenge-question-instruction,
#user-id-section
{
    display: none;
}

.securityQuestion
{
    font-weight: 800;
    padding-top: 1.5rem;
}

/*** confirmation css ***/
.confirmationBlock
{
    display: none;
}


/*** offer ad css ***/

.blockGrid3.cardGrid.no-column-border .offer-ad-block .columnBlockContainer
{
    border: 1px solid var(--dark-background);
    padding: var(--double-gutter-padding);
}

.offer-ad-block p,
.blockGrid3.cardGrid .offer-ad-block .imageBlock,
.blockGrid3.cardGrid .offer-ad-block .headerBlock .paragraphBlock
{
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.blockGrid3.cardGrid .offer-ad-block .imageBlock
{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.rebate-table > .row {
    border: 1px solid #D6D6D6;
    max-width: 88rem !important;
}

/* .rebate-table > .row .code-container.column {
    padding-left: 0;
    padding-right: 0;
} */

.rebate-table table {
    margin-bottom: 0;
}

.offers-brand-spread.spread .container {
    align-items: flex-start;
}

/* this fixes another  rule that needs to be looked at globally */
.offers-brand-spread .paragraphBlock {
    padding-left: 0;
    padding-right: 0;
}



table.offers-table,
table.offers-table tbody,
table.offers-table tr,
table.offers-table td
{
    border: none;
    font-size: 0.875rem;
    color: #030211;
}

table.offers-table tr:nth-child(even) {
    background-color: #F6F6F6;
}



table.offers-table.offers-middle-column {
    padding-left: 2rem;
    padding-right: 2rem;
}


/* table.offers-table tr
{
    border-top: 1px solid #979797;
}

table.offers-table  tr:last-child
{
    border-bottom: 1px solid #979797;
} */

table.offers-table tr td:nth-child(1)
{
    width: 80%;
}

table.offers-table tr td:nth-child(2)
{
    text-align: center;
}

/* table.offers-table tbody tr:nth-child(2n)  */
table tbody tr:nth-child(2n) {
    background-color: #FFF;
}

/*** utility bar css ***/

.utilityTitle {
    grid-area: utilityTitle;
    font-size: 1.3125rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.dateMenu .utilityTitle {
    font-size: 0.875rem;
    font-weight: 400;
}

.skipToContainer
{
    grid-area: skipToMenu;
}

.utilityRight
{
    grid-area: utilityRight;
}


.utility-bar-container {
    display: grid;
    align-items: center;
    grid-gap: 1rem;
    grid-template-columns: 250px auto auto auto;
    grid-template-areas:
      "utilityTitle skipToMenu utilityRight utilityRight"
}

.skipToContainer,
.dateMenu
{
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    font-family: var(--base-font-family);
    align-items: center;
    letter-spacing: 1.14px;
    flex-wrap: wrap;
}

#dateRange
{
    padding: 1rem 1rem 1rem 0.8rem;
}

.dateSelector
{
    display: none;
    padding: 0.4rem 0 1.5rem 1.5rem;
}

.dateSelectionContainer
{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;
    align-items: center;
    flex-direction: row;
}

.dateSelectionContainer .fromDate,
.dateSelectionContainer .toDate
{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 4px;
    border: none;
    background-color: #f6f6f6;
    padding: 5px 0;
}

.dateSelectionContainer .month
{
    text-align: center;
    padding: 3px 4px;
    color: var(--link-text-color);
}

.dateSelectionContainer .year
{
    grid-column-end: span 3;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dateSelectionContainer .year .fromYearSelectedValue,
.dateSelectionContainer .year .toYearSelectedValue
{

}

.yearContainer
{
    flex-grow: 2;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.dateSelectionContainer .year .leftArrow,
.dateSelectionContainer .year .rightArrow
{
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--link-text-color);
}

.dateSelectionContainer .year .leftArrow
{
    padding-left: 0.75rem;
}

.dateSelectionContainer .year .rightArrow
{
    padding-right: 0.75rem;
}


.dateSelectionContainer .toMonth.disableMonth,
.dateSelectionContainer .fromMonth.disableMonth
{
   color: #595959;
   pointer-events: none;
}

.dateSelectionContainer .year .leftArrow.arrowDisabled,
.dateSelectionContainer .year .rightArrow.arrowDisabled
{
    color: gray;
    pointer-events: none;
}

.dateSelectionContainer .month.selected
{
    background-color: var(--link-text-color);
    color: white;
    padding: 3px 4px;
}

.dateSelectionContainer .month:hover
{
    background-color: var(--link-text-color);
    color: white;
    padding: 3px 4px;
}

.dateRangeMenuApply
{
    align-self: flex-end;
    padding-left: 1rem;
    padding-right: 1rem;
}

.dateMenu a.standardLink.htmlRadio
{
    font-size: 0.875rem;
    padding: 0.4rem 0;
}

.dateMenu .list-title
{
    font-size: 0.875rem;
    font-weight: 600;
}

.dateField
{
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    align-items: center;
    margin-bottom: 1rem;
    width: 202px;
    justify-content: center;
}

.dateField [type="text"]
{
    background-color: #fff;
    border: none;
    margin: 0;
    box-shadow: none;
    text-align: center;
    padding: 0;
    width: 45px;
    height: auto;
    font-size: 0.875rem;
}

.dateField .custMonthField
{
    width: 40px;
}

.dateErrorMessage
{
    float: none;
    margin: 0.5rem 0;
}

.utilityRight {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 16px;
    align-items: center;
    justify-content: end;
}

.utilityBarHeader
{
    padding: 0 1rem 0 1.5rem
}

.skipLink
{
    margin-bottom: 0.4rem;
    color: var(--text-link);
    text-decoration: none;
    font-size: 0.875rem;
    font-family: var(--base-font-family);
    color: #030211;
}

.skipLink:hover,
.skipLink:focus
{
    color: #030211;
    text-decoration: underline;
}

/*** purchase calculator component css ***/

.calculatorTierSelector .linkContainer .button
{
    border-radius: 25px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: 130px;
    text-align: center;
    border-color: #3A60FF;
}

/* .button.hollow,
.button.hollow:hover,
.button.hollow:active,
.button.hollow:focus
{
    border: 1px solid #3A60FF;
    color: #3A60FF;
    font-weight: 700;
    font-size: 0.875rem;
} */

.button.hollow.selected,
.button.hollow.selected:hover,
.button.hollow.selected:active,
.button.hollow.selected:focus
{
    color: #fff;
    background-color: #3A60FF;
}

.button.hollow:hover
{
    color: #fff;
    background-color: #3A60FF;
}

/*** calculator block css ***/
.calculator-container
{
    max-width: 50rem;
    margin: 0 auto;
}

.dataSelector
{
    margin: 0 auto 1rem auto;
}

.radioBlock
{
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
}

.radioBlock:last-child
{
    padding-right: 0.5rem;
}

.radioBlock a.htmlRadio,
.radioBlock a.htmlRadio:focus,
.radioBlock a.htmlRadio:hover,
.radioBlock a.htmlRadio:active
{
    font-size: 0.875rem;
    color: #0B2335;
}

.radioBlock a.htmlRadio:hover
{
    text-decoration: none;
}

.radioBlock a.htmlRadio::before
{
    padding-right: 0.2rem;
    color: var(--section-color-bkgd2);
}

.selectorHeader
{
    padding-right: 1rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.calculatorBlock
{
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    font-size: 0.875rem;
    color: #595959;
}

.calculatorTierMessage
{
    display: none;
    text-align: center;
    margin: 1rem auto 2rem auto;
    max-width: 50rem;
}

.calculatorTierSelector .linkContainer .button
{
    margin-bottom: 1rem;
}

.calculatorStatLabel
{
    display: inline-flex;
    align-items: flex-start;
}

.flexRow .calculatorBlock
{
    padding-bottom: 0.2rem;
}

.flexGoalAmount
{
    font-size: 0.8125rem;
    color: #595959;
}

.calculatorValueRow,
.calculatorLabelRow,
.calculatorRow
{
    display: grid;
    grid-template-columns: repeat(4, 100px 27% 23% 27%);
    grid-gap: 0px 10px;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.calcColumn
{
    display: flex;
    flex-direction: column;
    /* padding-bottom: 2.75rem; */
}

.totalsColumn
{
    display: flex;
    flex-direction: row;
}

.calculatorValue
{
    font-size: 1.5rem;
    color: #0B2335;
    font-weight: 600;
}

.labelValueWrapper
{
    display: flex;
    flex-direction: column;
}

.totalBorder
{
    border-left: 1px dashed #979797;
    padding-left: 2rem;
}

.calculator-container .targetBlock
{
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.calculator-container .targetBlock .targetContainer
{
    display: flex;
    flex-direction: row;
    width: 90%;
    justify-content: space-between;
    align-items: center;
}

.calculator-container .targetBlock .targetTitle
{
    font-weight: 400;
}

.calculatorDivider
{
    border: none;
    border-top: 1px dashed #979797; /* Dashed blue line */
    margin: 30px 0; /* Add vertical spacing */
}

.rowLabel
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.rowLabelContainer
{
    display: inline-flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: flex-start;
    padding-top: 0.2rem;

}

.rowLabel h4
{
    flex-grow: 0;
    text-transform: unset;
    font-size: 1rem;
    padding-right: 0.1rem;
    letter-spacing: 0.08px;
}

.calculator-container .rowLabel h4
{
    margin-bottom: 1rem;
}

.goalMet::before,
.goalMissed::before
{
    display: inline-block;
    width: 8px;
    content: '.';
    margin: 0 1rem 0 0.5rem;
    height: 100%;
}

.goalMet::before
{
    background-color: #31CC75;
    color: #31CC75;
}

.goalMissed::before
{
    background-color: #ED423A;
    color: #ED423A;
}

.goalMissedValue
{
    color: #ED423A;
}

.calculatorTotalLine
{
    color: #979797;
    margin: 2rem 0 2rem 0;
}

.goalIndicator
{
    height: 52px;
}

.dataSelector
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

/*** small data set css - 3 months or less ***/
.small-data-set
{
    width: 50%;
}

.small-data-set .display-title-block
{
    flex-grow: 2;
}

.small-data-set .display-title-bar
{
    flex-wrap: wrap;
}

.small-data-set .display-subtitle
{
    /* flex-direction: column; */
    flex-wrap: wrap;
}

.small-data-set .misc-block
{
    justify-content: flex-start;
    /* margin: 0.5rem 0; */
    flex-direction: column;
    align-items: flex-end;
    min-height: 65px;
}

.small-data-set .misc-block .switchContainer
{
    margin-left: 0;
    flex-grow: 1;
}

.small-data-set .chart-dev-info
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .small-data-set:last-child
{
    float: left;
}

.marqueeStyle .marqueePadding {
    padding: 4vh 10vw;
}

.marqueeStyle .marqueePadding p,
.marqueePadding  .marqueeStyle p
{
    margin: 0;
    color: #fff;
}

.marqueeStyle .marqueePadding a,
.marqueeStyle .marqueePadding a:hover,
.marqueeStyle .marqueePadding a:focus,
.marqueePadding  .marqueeStyle a,
.marqueePadding  .marqueeStyle a:hover,
.marqueePadding  .marqueeStyle a:focus
{
    color: #fff;
    text-decoration: underline;
}

table#tierTable2 tr.benefits-blurb,
table#mobileTierTable2 tr.benefits-blurb
{
    display: none;
}

section p.benefit, section p.benefit2 {
    display: flex;
}

.mobile-benefits-header,
.mobile-benefits-location,
.mobile-benefits-newlogo
{
    display: none;
}

.offers-container h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    padding-top: 0.675rem;
}

.offers-container-card-layout .innerColumnBlock {
    background-color: #fff;
    padding: 2rem;
    text-align: center;
}

.offers-container-card-layout .offer-ad-block {
    padding: 1rem;
}

.accordion-content ul {
    padding-top: 0.5rem;
}

.accordion-content ul li {
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

/*** error message css ***/

.dashboard-error-message,
.rewards-error-message,
.purchases-error-message,
.marchon-altair-message,
.no-access-error-message
{
    display: none;
}


#welcomeModal {
    top: -1250px !important;
    display: flex;
    flex-direction: column;
}

#welcomeModal.correctModalposition,
#footnoteModal.correctModalposition
{
    top: 75px !important;
}

.termsContainer p {
    margin-bottom: 1.5rem;
}

/*** notifications css ***/

#notifications-section .spread .spreadCol1
{
    padding-left: 0;
}


/*** CSR search results table ***/
#csr-search-results thead
{
    background-color: #F6F6F6;
}

#csr-search-results tr
{
    background: none;
}

#csr-search-results tr th
{
    background: none;
    color: #595959;
    font-family: var(--base-font-family);
    font-weight: 800;
    text-align: left;
    font-size: 1rem;
    border: 1px solid #D6D6D6;
}

#csr-search-results tr:nth-child(even)
{
    background-color: #F6F6F6;
}

#csr-search-results tr td
{
    padding: 1rem;
    vertical-align: top;
    border: 1px solid #D6D6D6;
}

#csr-search-results tbody
{
    display: none;
}


#csr-search-results tbody.visiblePage
{
    display: contents;
}

#csrResults .paginationRow
{
    display: flex;
    flex-direction: row;
    margin-bottom: 0.8rem;
}

#csrResults .prevPage,
#csrResults .nextPage
{
    padding: 0 1rem;
}

#csrResults .prevPage
{
    padding-left: 0;
}

#csrResults .pageNumbers span
{
    padding: 0 0.3rem;
}

#csrResults .deactivateLink
{
    pointer-events: none;
    color: #595959;
}

.csr-mobile-card-view .csr-card-view td p
{
    margin-bottom: 0.6rem;
}

.mobile-head .fas.fa-check
{
    display: none;
}

/*** marchon altair page CSS ***/
.marchonAltairFrameTable
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.marchonAltairTable
{
    width: auto%;
}

.marchonAltairTable table
{
    margin-bottom: 0.5rem;
    width: 100%;
}

.marchonAltairTable table tr th
{
    background: #8C2791;
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
}

.marchonAltairTable table tr td
{
    padding: 1rem 1rem 1rem 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vsp-blue-black);
}

.marchonTableHeader
{
    text-align: center;
}

.marchonAltairTable .plainText
{
    font-weight: 400;
}

.marchonAltairTable .mobileTable
{
    display: none;
}

/*** END marchon altair page CSS ***/



/********************** MEDIA QUERIES *************************/

/********************** Small only *************************/
@media screen and (max-width: 39.9375em) {
    h2 {
        font-size: 1.3125rem;
        margin-bottom: 0.75rem;
    }

    /* h1, h2, h3
    {
       text-wrap: nowrap;
    } */

    table.offers-table.offers-middle-column tr:nth-child(odd) {
        background-color: #F6F6F6;
    }

    table.offers-table.offers-middle-column tr:nth-child(even) {
        background-color: #fff;
    }

    /*  we might want to consider doing this globally since on mobile MOST OF THE TIME
        we don't want largePadding on the top and bottom as it causes huge white spaces */
    /* .small-24.largePadding {
        padding-top: 0;
        padding-bottom: 0;
    } */
    /* Accpint linking */
    .removeInvalidatedAccContainer, #accDelete {
        margin-left: 1rem;
    }
    #accDelete {
        width: unset;
    }
    .createDate, .actionReq {
        min-width: unset;
    }
    .removeAccContainer {
        margin-left: unset;
    }
    .inValidatedAccountLinkingWrapper > .createDate > .linkedCreationDate {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .username {
        min-width:7rem;
    }
    .moreAccLoginContainer {
        justify-content: unset;
        gap: 2.5rem;
        margin-right: unset;
    }
    .accountLinkingWrapper {
        gap:1rem;
    }
    .expand-collapse {
        padding-right: 1rem;
    }

    .status-bar-container .pageTitle,
    .status-bar-container .status,
    .utilityTitle {
        font-size: 1rem;
    }

    .chart-table-component .image {
        display: none;
    }

    .eligibilityDashboard .column-flex .columnTitle {
        padding-top: 0.5rem;
        padding-bottom: 0;
        padding-left: 0.5rem;
    }

    .eligibilityDashboard .container .columnTitle span {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .column-flex-container.eligibilityDashboard .container.section-color-background1 {
        padding: 0.5rem;
    }

    .status-summary-block {
        padding: 1rem 0.5rem;
    }

    .progressChart {
        padding: 0.5rem 0 0;
        margin: 0;
    }

    .eligibility-container {
        padding-bottom: 1rem;
    }

    .next-tier-rewards-block .cardGrid {
        margin-top: 0;
    }

    .display-cta-bar
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .display-cta-bar .linkBlock a.standardLink
    {
        padding: 0 1rem;
    }

    .display-cta-bar .ctaSpacer
    {
        display: none;
    }

    #rebatesSummary {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 16px;
        min-height: unset;
    }

    .rebate-summary-container.featured {
        /* grid-area: unset;
        grid-column: 1; */
        grid-area: 1 / 1;
    }

    .rebate-summary-container
    {
        /* grid-column-end: unset;
        min-height: 150px;
        grid-area: unset; */
    }

/* JJH 010224
    .display-chart-container, .display-chart-progress {
        padding-top: 1rem;
    }
*/

    .chart-table-component {
        margin-bottom: 0.5rem;
    }

    .marqueeStyle .marqueePadding {
        padding: 0vh 8vw 2vh;
    }

    #downloadRewards-title {
        width: 100%;
    }

    #rebateSummaryContainer { /* need to override the !important from ph.css */
        padding-left: 0.9375rem !important;
        padding-right: 0.9375rem !important;
    }

    .rebate-summary-container.block2,
    .rebate-summary-container.block3,
    #totalMarchon, #totalAltair, #totalUnity, #totalHoya, #totalZeiss {
        /* grid-column-start: unset;
        grid-column-end: unset; */
        grid-area: unset;
        grid-column: 1;
    }

    .column-flex-container .container.section-color-background1
    {
        padding: 1.5rem 0.8rem;
    }

    /*** account number css ***/
    /* .account-number-wrapper
    {
        grid-template-columns: 1fr;
    } */

    .account-number-component.oneColumn .row
    {
        max-width: 22rem !important;
    }

    .accordion-item.is-active .accountNumberList
    {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .accordion-title
    {
      padding-left: 1rem;
    }

    /*** utility bar css ***/
    .utility-bar-container
    {
        display: grid;
        align-items: center;
        grid-gap: 1rem;
        grid-template-columns: 100%;
        grid-template-areas:
        "utilityTitle";
    }

    .utilityBarHeader
    {
        padding: 0;
        /* width: 100px; */
        text-align: left;
        padding-right: 1rem;
        padding-right: 1rem;
    }
    .dateMenu
    {
        padding: 0;
    }

    .misc-block
    {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }

    .display-title-bar
    {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .display-title-block
    {
        margin-bottom: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .premierFeature .image
    {
        padding-left: 0;
        padding-right: var(--single-gutter-padding);
        padding-bottom: 0.4rem;
    }

    .switchContainer,
    .downloadLink
    {
        margin: 0;
        margin-bottom: 0.5rem;
    }

    .display-subtitle
    {
        flex-wrap: wrap;
    }

    .chartDateRange,
    .summaryStatValue
    {
        width: 100%;
    }

    .chartDateRange::after
    {
        content: '';
        font-weight: unset;
        white-space: pre;
    }

    /*** calculator css ***/
    .calculator-component
    {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;

    }

    .mainCalcContainer {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .calculatorRow
    {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        grid-gap: 0px;
        line-height: 1.4;
        /* padding-bottom: 1.5rem; */
    }

    .labelColumn
    {
        grid-area: 1 / 1 / 1 / 3;
    }

    .totalsColumn
    {
        grid-area: 2 / 1 / 2 / 3;
    }

    .spendingColumn
    {
        grid-area: 2 / 3 / 2 / 5;
    }

    .calcColumn
    {
        padding-bottom: 0;
    }

    .rowLabel
    {
        height: 35px;
        border-right: 1px dashed #979797;
    }

    .rowLabelContainer {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .calculatorStatLabel
    {
        display: inline-flex;
        align-items: flex-start;
    }

    .equalSign,
    .plusSign,
    .calculatorRow .hide-on-mobile,
    .flexRow .calculatorLabelRow
    {
        display: none;
    }

    .totalBorder
    {
        padding-left: 1.5rem;
        padding-bottom: 1.5rem
    }

    .dataSelector
    {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 1rem;
    }

    .dataSelector .selectorHeader
    {
        flex-basis: 100%;
        padding-bottom: 0.5rem;
    }

    .goalColumn
    {
        grid-column: 2 / 3;
    }

    .goalMet::before, .goalMissed::before
    {
        margin: 0 1rem 0 0;
        height: 52px;
    }

    .goalIndicator
    {
        border-right: 1px dashed #979797;
        height: auto;
    }

    .totalBorder
    {
        border-left: none;
    }

    /*** small data set css  - 3 months or less ***/
    .small-data-set
    {
        width: 100%;
    }

    .small-data-set .display-title-bar
    {
        flex-wrap: wrap;
    }

    .small-data-set .misc-block
    {
        justify-content: flex-start;
        margin: 0.5rem 0;
    }

    .small-data-set .misc-block .switchContainer
    {
        margin-left: 0;
    }

    .small-data-set .chart-dev-info
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .reveal.dashboardWelcomeModal, .reveal#footnoteModal
    {
        margin: 1rem;
        width: unset;
        height: unset;
        min-height: unset;
    }

    /*** profile css ***/
    .profileParagraph .marqueePadding
    {
        padding: 2vh 5vw;
    }

    .profileParagraph .marqueePadding ul
    {
        width: 90%;
        text-align: left;
        margin: 0 auto;
    }

    .scrollToTop.textOnly {
        padding: 1.6rem;
    }

    .modalTitleBar .close-button {
        line-height: 1;
        font-size: 2rem;
    }

    .scrollToTop span {
        display: inline-flex !important; /* need the ! to override utility.css ! rule */
    }

    .eligibilityCurrentStatus h2 {
        font-size: 1rem;
        font-weight: 600;
    }

    .eligibilityProgress .tierOverlay
    {
        padding: 0;
    }

    .eligibilityProgress .tierOverlay .tierRestrictMessage
    {
        width: 100%;
        font-size: 1rem;
        padding: 2rem 0 2rem 1.2rem;
    }

    .eligibilityProgress .tierOverlay .tierRestrictMessage h2
    {
        width: 100%;
        font-size: 2rem;
    }

    /*** notifications css ***/

    #notifications-section .spread .spreadCol2
    {
        padding-left: 0;
    }

    .calculator-container .targetBlock .targetContainer
    {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    /*** lob block container ***/
    .lobBlockGridGroup .columnContainer
    {
        flex-direction: column;
    }

    /*** eligibility stat section ***/
    .eligibilityProgress {
        flex-direction: column;
    }

    #purchaseProgress
    {
        width: 100%;
        text-align: center;
        padding: 2rem 0;
    }

    /*** pecaa stats block mobile ***/
    .pecaaFeature .spreadCol2
    {
        flex-direction: column;
        justify-content: center;
    }

    #pecaaStatusInfoGraphic.pecaaDataPoints
    {
        width: 100%;
        margin: 0 0 1rem 0;
    }

    #pecaaStatusInfoGraphic.pecaaDataPoints.pecaaVisionRebates
    {
        margin-top: 1rem;
    }

    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay
    {
        padding: 2.5rem 0 2.5rem 0;
    }

    .unityPointsGridSection .unityGridParagraph
    {
        flex-direction: column;
    }


}

@media screen and (max-width: 768px)
{
    /* JJH Benefits mobile table stuff */
    table.tierTable {
        margin-bottom: 1px;
    }

    .code-container.column {
        padding-left: 0;
        padding-right: 0;
    }

    table#tierTable tr.status-row,
    table#tierTableSilver tr.status-row,
    table#tierTableGold tr.status-row,
    table#tierTablePlatinum tr.status-row,
    table#tierTable2 tr.status-row,
    table#tierTableSilver2 tr.status-row,
    table#tierTableGold2 tr.status-row,
    table#tierTablePlatinum2 tr.status-row,
    table#mobileTierTable tr.status-row,
    table#mobileTierTable2 tr.status-row
    {
        display: none;
    }

    table#tierTable tr.mobile-hide,
    table#tierTable td.mobile-hide,
    table#tierTableSilver tr.mobile-hide,
    table#tierTableSilver td.mobile-hide,
    table#tierTableGold tr.mobile-hide,
    table#tierTableGold td.mobile-hide,
    table#tierTablePlatinum tr.mobile-hide,
    table#tierTablePlatinum td.mobile-hide,
    table#tierTable2 tr.mobile-hide,
    table#tierTable2 td.mobile-hide,
    table#tierTableSilver2 tr.mobile-hide,
    table#tierTableSilver2 td.mobile-hide,
    table#tierTableGold2 tr.mobile-hide,
    table#tierTableGold2 td.mobile-hide,
    table#tierTablePlatinum2 tr.mobile-hide,
    table#tierTablePlatinum2 td.mobile-hide,
    table#tierTable.mobile-hide,
    table#mobileTierTable tr.mobile-hide,
    table#mobileTierTable td.mobile-hide,
    table#tierTable2.mobile-hide,
    table#mobileTierTable2 tr.mobile-hide,
    table#mobileTierTable2 td.mobile-hide
    {
        display: none;
    }

    .tooltipIcon.network-tip {
        display: inline-block;
    }

    table#tierTable .tooltipIcon.network-tip i::before,
    table#tierTable2 .tooltipIcon.network-tip i::before {
        background-color: var(--link-text-color);
        color: #fff;
    }

    table#tierTable tbody tr.table-row.header-row td.vspnetwork,
    table#tierTableSilver tbody tr.table-row.header-row td.silver,
    table#tierTableGold tbody tr.table-row.header-row td.gold,
    table#tierTablePlatinum tbody tr.table-row.header-row td.platinum,
    table#tierTable2 tbody tr.table-row.header-row td.vspnetwork,
    table#tierTableSilver2 tbody tr.table-row.header-row td.silver,
    table#tierTableGold2 tbody tr.table-row.header-row td.gold,
    table#tierTablePlatinum2 tbody tr.table-row.header-row td.platinum,
    table#mobileTierTable tbody tr.table-row.header-row td.vspnetwork,
    table#mobileTierTable tbody tr.table-row.header-row td.silver,
    table#mobileTierTable tbody tr.table-row.header-row td.gold,
    table#mobileTierTable tbody tr.table-row.header-row td.platinum,
    table#mobileTierTable2 tbody tr.table-row.header-row td.vspnetwork,
    table#mobileTierTable2 tbody tr.table-row.header-row td.silver,
    table#mobileTierTable2 tbody tr.table-row.header-row td.gold,
    table#mobileTierTable2 tbody tr.table-row.header-row td.platinum
    {
        /* background-color: #F6F6F6; */
        color: #0B2335;
        /* position: static; */
    }

    /* This is for NETWORK */
    table#mobileTierTable tbody tr td:nth-child(3),
    table#mobileTierTable tbody tr td:nth-child(4),
    table#mobileTierTable tbody tr td:nth-child(5),
    table#mobileTierTable2 tbody tr td:nth-child(3),
    table#mobileTierTable2 tbody tr td:nth-child(4),
    table#mobileTierTable2 tbody tr td:nth-child(5) {
        display: none;
    }

    /* This is for SILVER */
    table#tierTableSilver tbody tr td:nth-child(2),
    table#tierTableSilver tbody tr td:nth-child(4),
    table#tierTableSilver tbody tr td:nth-child(5),
    table#tierTableSilver2 tbody tr td:nth-child(2),
    table#tierTableSilver2 tbody tr td:nth-child(4),
    table#tierTableSilver2 tbody tr td:nth-child(5)
    {
        display: none;
    }

    /* This is for GOLD */
    table#tierTableGold tbody tr td:nth-child(2),
    table#tierTableGold tbody tr td:nth-child(3),
    table#tierTableGold tbody tr td:nth-child(5),
    table#tierTableGold2 tbody tr td:nth-child(2),
    table#tierTableGold2 tbody tr td:nth-child(3),
    table#tierTableGold2 tbody tr td:nth-child(5) {
        display: none;
    }

    /* This is for PLATINUM */
    table#tierTablePlatinum tbody tr td:nth-child(2),
    table#tierTablePlatinum tbody tr td:nth-child(3),
    table#tierTablePlatinum tbody tr td:nth-child(4),
    table#tierTablePlatinum2 tbody tr td:nth-child(2),
    table#tierTablePlatinum2 tbody tr td:nth-child(3),
    table#tierTablePlatinum2 tbody tr td:nth-child(4) {
        display: none;
    }

    table#tierTable tr.header-row td,
    table#tierTableSilver tr.header-row td,
    table#tierTableGold tr.header-row td,
    table#tierTablePlatinum tr.header-row td,
    table#tierTable2 tr.header-row td,
    table#tierTableSilver2 tr.header-row td,
    table#tierTableGold2 tr.header-row td,
    table#tierTablePlatinum2 tr.header-row td,
    table#mobileTierTable tr.header-row td,
    table#mobileTierTable tr.header-row td,
    table#mobileTierTable tr.header-row td,
    table#mobileTierTable tr.header-row td,
    table#mobileTierTable2 tr.header-row td,
    table#mobileTierTable2 tr.header-row td,
    table#mobileTierTable2 tr.header-row td,
    table#mobileTierTable2 tr.header-row td
    {
        font-size: 1.1rem;
        color: #0B2335;
        text-align: center;
        font-weight: 600;
    }

    table#tierTableSilver tr,
    table#tierTableGold tr,
    table#tierTablePlatinum tr,
    table#tierTableSilver2 tr,
    table#tierTableGold2 tr,
    table#tierTablePlatinum2 tr  {
        display: table-row;
    }

    #tierTableNetwork thead,
    #tierTablePremier thead,
    #tierTablePecaaMax thead
    {
        border: 1px solid #595959;
    }

    /* this is neeeded to get the :before stuff working right */
    .mobile-head {
        position: relative;
    }

    .mobile-head::after {
        font-size: 1.5rem;
        line-height: 1rem;
        position: absolute;
        top: 36%;
        right: 20px;
        font-family: "Font Awesome 6 Pro";
        font-weight: 800;
        content: '\f107';
        color: #3A60FF;
    }

    table.tierTable tr
    {
        border: none;
        margin-bottom: 0;
    }

    table.tierTable:last-child tr.arrow-up
    {
        border-bottom: 1px solid #9f9f9f;
    }

    #tierTablePlatinum tr.header-row,
    #tierTablePlatinum2 tr.header-row
    {
        border-bottom: 1px solid #9f9f9f;
    }

    #tierTable:last-child tr.arrow-up
    {
        border-bottom: none;
    }

    table.tierTable tr.header-row
    {
        background-color: #F6F6F6;
    }

    table#tierTable tbody tr.table-row.header-row td.vspnetwork,
    table#tierTable2 tbody tr.table-row.header-row td.vspnetwork
    {
        background-color: transparent;
    }

    #tierTablePlatinum tr:last-child,
    #tierTablePlatinum2 tr:last-child
    {
        border: 1px solid #9f9f9f;
    }

    /* table.tierTable tr td {
        border-bottom: none;
    } */

    table.tierTable tr td:nth-child(2),
    table.tierTable tr td:nth-child(3),
    table.tierTable tr td:nth-child(4),
    table.tierTable tr td:nth-child(5)
    {
        text-wrap: nowrap;
        width: 115px;
    }

    .header-row.arrow-up .mobile-head::after {
        content: '\f106';
    }

    #tierTable2 .mobile-head::after,
    #mobileTierTable2 .mobile-head::after,
    #tierTableSilver2 .mobile-head::after,
    #tierTableGold2 .mobile-head::after,
    #tierTablePlatinum2 .mobile-head::after  {
        content: '\f107';
    }

    #tierTable2 .header-row.arrow-up .mobile-head::after,
    #mobileTierTable2 .header-row.arrow-up .mobile-head::after,
    #tierTableSilver2 .header-row.arrow-up .mobile-head::after,
    #tierTableGold2 .header-row.arrow-up .mobile-head::after,
    #tierTablePlatinum2 .header-row.arrow-up .mobile-head::after {
        content: '\f106';
    }

    /* .vspnetwork .is-active > .vspnetwork::before,
    .silver .is-active > .silver::before,
    .gold .is-active > .gold::before,
    .platinum .is-active > .platinum::before {
        content: '\f106';
        font-size: 1.5rem;
        font-weight: 800;
    } */

    .mobile-benefits-row td {
        display: none;
    }

    .mobile-benefits-row .mobile-benefits-td {
        display: table-cell;
    }

    table#tierTable2 tr.benefits-blurb,
    table#mobileTierTable2 tr.benefits-blurb,
    table#tierTableSilver2 tr.benefits-blurb,
    table#tierTableGold2 tr.benefits-blurb,
    table#tierTablePlatinum2 tr.benefits-blurb {
        display: none;
        margin-bottom: 0;
    }

    .benefits-blurb.table-row td {
        padding: 1rem 2.75rem;
        font-size: 1rem;
        color: #030211;
        border: none;
    }

    .mobile-benefits-header {
        margin-bottom: 0;
        display: block;
    }

    .benefits-code-container2 .mobile-benefits-header {
        margin-bottom: 0.5rem;
    }

    .benefits-header2
    {
        padding-bottom: 0.8rem;
    }

    .mobile-benefits-location
    {
        display: block;
        padding-bottom: 0;
    }

    .mobile-benefits-newlogo
    {
        display: inline-block;
        margin-top: 0.2rem;
        margin-bottom: 0.6rem;
    }

    .fa-check.orange-check,
    .fa-check.brown-check {
        /* position: absolute;
        right: 7.75rem;
        top: 0.875rem; */
    }

    .fa-check.orange-check::before {
        color: #EF6E0B
    }

    .fa-check.brown-check::before {
        color: #595959;
    }

    .fa-check.black-check::before {
        color: var(--text-color);
    }

    .vspnetwork .fa-check.brown-check {
        right: 4.25rem;
    }

    .platinum .fa-check.brown-check {
        right: 6.75rem;
    }

    .mobile-head .fa-check.orange-check,
    .mobile-head .fa-check.brown-check,
    .mobile-head .fa-check.black-check
    {
        padding: 0 0.5rem;
    }

    .mobile-head .fas.fa-check
    {
        display: inline-block;
    }

    /*** marchon mobile CSS ***/
    .marchonAltairTable
    {
        margin: 0 1rem;
    }

    .marchonAltairTable table
    {
        margin-bottom: 0.5rem;
        width: 100%;
    }

    .mobileTable
    {
        width: 100%;
    }

    .desktopTable
    {
        display: none;
    }

    .marchonAltairTable .mobileTable
    {
        display: table;
    }

    .mobileTable tbody:nth-child(2)
    {
        display: none;
    }

    .mobileTable tbody:first-child tr
    {
        margin-bottom: 0;
    }

    .mobileTable tbody tr
    {
        display: table-row;
    }

    .marchonAltairTable table tr th
    {
        border: none;
    }

    .mobileTable tbody tr td
    {
        display: table-cell;
    }

    .mobileTable tbody:first-child th::after
    {
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        content: " \f107";
        color: white;
    }

    .mobileTable tbody.is-open th::after
    {
        content: " \f106";
    }

    #tier1TableMobile tbody:nth-child(2)
    {
        display: table-row-group;
    }

    /*** END marchon mobile CSS ***/

}

@media screen and (min-width: 40em){

    section.pageBodyRow section.mainDisplay
    {
        /* padding-right: var(--double-gutter-padding); */
        padding-left: 0;
    }

    section.pageBodyRow aside.mainSidebar
    {
        /* padding-left: var(--double-gutter-padding); */
        padding-right: var(--single-gutter-padding);
    }

}

@media screen and (min-width: 40em) and (max-width: 63.9375em)
{

    .rebate-color-block {
        padding-left: 0.5rem
    }

    .rebatePeriod {
        font-size: 0.875rem;
    }

    #totalMarchon .summaryData .rebateValue,
    #totalAltair .summaryData .rebateValue,
    #totalUnity .summaryData .rebateValue,
    #totalHoya .summaryData .rebateValue,
    #totalZeiss .summaryData .rebateValue {
        font-size: 0.8125rem;
    }

    /*** small data set css  - 3 months or less ***/
    .small-data-set
    {
        width: 50%;
    }

    .small-data-set .display-title-bar
    {
        flex-wrap: wrap;
    }

    .small-data-set .misc-block
    {
        justify-content: flex-start;
        margin: 0.5rem 0;
    }

    .small-data-set .misc-block .switchContainer
    {
        margin-left: 0;
    }

    .small-data-set .chart-dev-info
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .eligibilityProgress .tierOverlay
    {
        padding: 0;
    }

    .eligibilityProgress .tierOverlay .tierRestrictMessage
    {
      width: 100%;
      padding: 2rem 0 2rem 2rem;
    }

    .eligibilityProgress .tierOverlay .tierRestrictMessage h2
    {
      width: 100%;
      font-size: 3rem;
    }

    #notifications-section .spread.container .spreadCol1
    {
        width: 12%;
    }

    #notifications-section .spread.container .spreadCol2
    {
        width: 88%;
    }

    /*** unity grid css for home page ***/
    .unityPointsGrid
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .unityPointsGrid .column-flex.unityGridLogo
    {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
    }
    .unityPointsGrid .column-flex.unityGridParagraph
    {
        grid-area: 2 / 1 / 3 / 2;
        width: 100%;
        align-self: start;
    }
    .unityPointsGrid .column-flex.unityDonutCharts
    {
        grid-area: 1 / 2 / 3 / 3;
        width: 100%;
        align-self: flex-start;
    }

    .unityPointsGridSection .image img {
        width: 65%;
    }

    /*** pecaa stats section ***/
    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay .spreadCol1
    {
        width: 100%;
    }

    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay .spreadCol2
    {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    #pecaaStatusInfoGraphic.pecaaDataPoints
    {
        width: 45%;
        margin: 0.5rem;
    }


}

@media screen
and (min-width: 1024px)
and (max-width: 1101px)
{
    /*** unity grid css for home page ***/
    .unityPointsGrid
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .unityPointsGrid .column-flex.unityGridLogo
    {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
    }
    .unityPointsGrid .column-flex.unityGridParagraph
    {
        grid-area: 2 / 1 / 3 / 2;
        width: 100%;
        align-self: start;
    }
    .unityPointsGrid .column-flex.unityDonutCharts
    {
        grid-area: 1 / 2 / 3 / 3;
        width: 100%;
        align-self: flex-start;
    }

    .unityPointsGridSection .image img {
        width: 100%;
    }

}

@media screen
and (min-width: 1024px)
and (max-width: 1101px)
and (orientation: landscape)
{
    .unityPointsGridSection .image img {
        width: 100%;
    }

    /*** unity grid css for home page ***/
    .unityPointsGrid
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .unityPointsGrid .column-flex.unityGridLogo
    {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
    }
    .unityPointsGrid .column-flex.unityGridParagraph
    {
        grid-area: 2 / 1 / 3 / 3;
        width: 100%;
        align-self: start;
    }
    .unityPointsGrid .column-flex.unityDonutCharts
    {
        grid-area: 1 / 2 / 2 / 3;
        width: 100%;
    }

    .unityPointsGridSection .image img {
        width: 100%;
    }

}

/* Small and Medium */
@media screen and (max-width: 63.9375em)
{
    header .topNavContainer {
        position: relative;
        left: unset;
        z-index: unset;
        width: 100%;
        top: unset;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* #my-practice-bar {
        padding-top: 0;
    } */

    .margin-double-padding
    {
        padding-left: var(--single-gutter-padding);
        padding-right: var(--single-gutter-padding);
    }

    /* .nav-bar-container
    {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        border: none;
        position: relative;
    }

    .nav-container-block
    {
        padding-left: 0;
        padding-bottom: 0;
        padding-right: 0;
        position: relative;
        overflow-x: auto;
        height: 55px;
    }

    .nav-container-block::-webkit-scrollbar
    {
		    height:0px;
	  }

  	.nav-container-block::-webkit-scrollbar-track
    {
  		  background-color:#fff;
  	}

  	.nav-container-block::-webkit-scrollbar-thumb
    {
  		  background-color:#fff;
  	}

    .nav-bar-container .linkColumn
    {
        position: relative;
        left: 0;
        right: 0;
        height: 40px;
        min-width: 800px;
        border-bottom: 1px solid #ccc;
    }

    .nav-bar-container .linkColumn a.standardLink
    {
        margin: 0 1rem;
    }

    .nav-bar-container .linkColumn a.standardLink:first-child {
        margin: -0.675rem 1rem 0 0.5rem;
    }

    .nav-bar-container a.standardLink.selected::before,
    .nav-bar-container a.standardLink.selectedNav::before
    {
        margin-bottom: -16px;
    }

    .subnav-NextDashBoard,
    .subnav-PrevDashBoard
    {
        color: #000;
        cursor: pointer;
        align-items: center;
    }

    .subnav-PrevDashBoard
    {
        border-right: none;
        border-bottom: 1px solid #ccc;
        height: 40px;
        padding: 0 0.4rem;
    }

    .nav-container-block .linkColumn a.standardLink {
        margin-top: -0.675rem;
    }

    .subnav-NextDashBoard
    {
        border-left: none;
        border-bottom: 1px solid #ccc;
        height: 40px;
        padding: 0 0.4rem;
    }

    .subnav-Prev-arrows::before
    {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f104";
        font-size: 1.4rem;
    }

    .subnav-Next-arrows::before
    {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f105";
        font-size: 1.4rem;
    }

    .subnav-PrevDashBoard.subnav-Prev-hideDashBoard,
    .subnav-NextDashBoard.subnav-Next-hideDashBoard
    {
        border: none;
        border-bottom: 1px solid #ccc;
        color: #8C8C8C;
        pointer-events: hide;
        cursor: default;
    } */

    .dashboard-bar-container
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    #my-practice-bar .dashboard-bar-container
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #my-practice-bar .dashboard-bar-message
    {
        display: none;
    }

    #my-practice-bar .practice-bar-cta
    {
        padding-top: 1.5rem;
    }

    .dashboard-bar-content
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #premier-value-bar
    {
        display: flex;
        flex-direction: column;
        flex-grow: unset;
        align-items: flex-start;
    }

    /* .dashboard-bar-label {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    } */

    div.practice-menu
    {
        padding: 0.3rem 0;
    }

    .practice-menu-bar-container
    {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    .practiceName
    {
        flex-grow: 1;
    }

    .status-bar-container .downloadStatement
    {
        flex-wrap: wrap;
        padding: 1rem 0 0.5rem;
        justify-content: flex-start;
    }

    .status-bar-container .downloadText
    {
        margin-bottom: 0.8rem;
    }

    .dashboard-bar.section-margin, .nav-bar.section-margin
    {
        margin-bottom: 0.5rem;
    }

    section.nav-bar {
        /* padding: 0.5rem 0 0.5rem; */
        padding: 0;
    }
    .status-bar {
        padding: 0.3125rem 1rem;
    }

    #practice-menu-items
    {
        margin-right: 1rem;
    }

    /*** eligibilityProgress css ***/
    .targetColumn
    {
        display: none;
        border: 1px solid #D6D6D6;
        border-top: none;
        margin-bottom: 0.4rem;
        padding-top: 1rem;
    }

    .targetBlock
    {
        min-height: unset;
        margin-bottom: 1rem;
    }

    .progressColumnTitle
    {
        font-size: 0.875rem;
        letter-spacing: 0.05px;
    }

    .display-progress-column .tierColumn
    {
        margin: 0 0.6rem;
    }

    .display-chart-progress .tierColumn.vspnetworkProgress
    {
        flex-basis: 90px;
    }

    .display-chart-progress .tierColumn.silverProgress
    {
        flex-basis: 80px;
    }

    .display-chart-progress .tierColumn.goldProgress
    {
        flex-basis: 80px;
    }

    .display-chart-progress .tierColumn.platinumProgress
    {
        flex-basis: 80px;
    }

    .progressColumnTitle.accordion-title {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        padding: 1rem 0.8rem;
        background-color: #EFEFEF;
        border: none;
        color: #030219;
        text-transform: uppercase;
        outline: 1px solid #030219;
    }

    :last-child:not(.is-active) > .accordion-title
    {
        border-bottom: none;
    }

    .progressColumnTitle.accordion-title::before
    {
        color: #3A60FF;
        font-size: 1.25rem;
    }

    .progressColumnTitle.accordion-title.is-active::before
    {
        content: '\f106';
    }

    .progressColumnTitle.accordion-title.is-active
    {
        text-decoration: underline;
        margin-bottom: 0;
    }

    .progressColumnTitle.accordion-title.is-active + .targetColumn.nextTierMobile .targetBlock
    {
        min-height: unset;
        margin-bottom: 1.5rem;
    }

    .premier-progress-component .display-progress-column
    {
        flex-direction: column;
    }

    /*** legend position for pie chart ***/

    .switchContainer,
    .display-table-container
    {
        display: none;
    }

    .utilityRight,
    .skipToContainer
    {
        display: none;
    }

    /*** chart css ***/
    .display-chart-container
    {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .chart-block .highcharts-legend-item
    {
        justify-content: center;
    }

    .chart-block.pie .highcharts-root
    {
        width: 80%;
    }

    .chart-block
    {
        margin-top: 1.75rem;
    }

    .chart-block:first-child
    {
        margin-top: 0;
    }

    .chart-table-component
    {
        margin-bottom: 2rem;
    }

    .misc-block
    {
        display: none;
    }

    .chart-dev-info
    {
        flex-direction: column;
    }

    .chart-block.pageWidthChart
    {
      height: auto;
    }

    /*** modal css ***/
    .dashboardWelcomeModal .modalContainer
    {
        padding: 0;
    }

    .modalTitleBar .close-button {
        line-height: 1;
        font-size: 2rem;
    }

    /*** tier overlay CSS ***/
    .tierRestrictMessage
    {
        font-size: 1.2rem;
    }

    #premier-value-bar .tierRestrictMessage
    {
        font-size: 1rem;
        line-height: 1.1;
        font-weight: 600;
    }

    .tierOverlay h2
    {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    /*** unity css ***/
    .spread.unityMessageSpread
    {
        padding: 1rem;
    }

    .spread.unityMessageSpread img,
    .spread.premierMessageSpread img,
    .unityPointsGridSection .image img
    {
        width: auto;
    }

    .unityMessageSpread .flex-horizontal,
    .unityPointsGrid
    {
        flex-direction: column;
    }

    /* .unityMessageSpread .flex-horizontal p
    {
        margin-bottom: 1.5rem;
    } */

    .unityMessageSpread .flex-horizontal .linkContainer,
    .unityPointsGrid .flex-vertical .linkContainer
    {
        width: 100%;
        margin-top: 1.5rem;
    }

    .unityPointsGridSection .hasBadgeOverlay
    {
        padding-left: 0.9375rem;
    }

    .nav-bar-container
    {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: none;
        padding-bottom: 0.7rem;
    }

    .nav-bar-container a.standardLink.selected::before, .nav-bar-container a.standardLink.selectedNav::before
    {
        position: absolute;
        height: 7px;
        background-color: blue;
        width: 100%;
        bottom: 0;
        margin-bottom: -16px;
        content: "";
    }

    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay
    {
        padding: 3.5rem 0 2.5rem 0;
        flex-wrap: wrap;
        flex-direction: column;
    }

}

@media screen and (max-width: 39.9375em)
{

    /*** premier-value-bar overrides ***/
    #premier-value-bar.dashboard-bar-container
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #premier-value-bar .practice-bar-cta
    {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
    }

    #premier-value-bar .dashboard-bar-message {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem 0;
    }

    .spread.unityMessageSpread .image,
    .unityPointsGrid .image
    {
        margin-top: 1.5rem;
    }

}

/* mobile and small tablet (maybe both in normal portrait mode) only I believe */
@media screen and (max-width: 64em)
{
    /* THIS overrides the rule from utility.css that makes mobile look terrible */
    /* .section-margin {
        margin-bottom: 0;
    } */

    /* another one like above */
    .largePadding {
        padding-bottom: 1rem;
    }

    .offers-container-card-layout .row > div {
        padding: 1rem 0;
    }

    .rebate-table {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    section.pageBodyRow aside.mainSidebar
    {
        padding-left: var(--single-gutter-padding);
        /* padding-right: var(--single-gutter-padding); */
    }

    section.pageBodyRow aside.mainSidebar > div .paragraphBlock.column {
        padding-left: var(--single-gutter-padding);
        /* padding-right: var(--double-gutter-padding); */
    }
    /*** eligibility dashboard CSS ***/
    .eligibilityDashboard .container.section-color-background1
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 25px;
        grid-template-areas: "eligibilityCurrentStatus"
                             "premierValue"
                             "eligibilityProgress"
                             "eligibilityTierBenefits";
        padding: 1.5rem 1rem;
    }

    .eligibility-container,
    .eligibility-rewards-container
    {
        height: auto;
    }

    .eligibilityDashboard .dashboard-bar-content
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 0.5rem;
    }

    .eligibilityDashboard .dashboard-bar-label
    {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .eligibilityDashboard .dashboard-bar-message p
    {
        font-size: 1rem;
        line-height: 1.4;
    }

    .eligibilityCurrentStatus
    {
        grid-area: eligibilityCurrentStatus;
        grid-column: 1 / 1;
        grid-row: unset;
    }

    .eligibilityTierBenefits
    {
        grid-area: eligibilityTierBenefits;
        grid-column: 1 / 1;
        grid-row: unset;
    }

    .eligibilityCurrentStatus {
        order: 1;
    }

    .premierValue{
        order: 2;
    }

    .eligibilityTierBenefits {
        order: 4;
    }

    .eligibilityProgress {
        grid-area: eligibilityProgress;
        grid-column: 1 / 1;
        grid-row: unset;
        order: 3;
        padding: 1rem 0;
    }

    #premier-value-bar
    {
        padding: 1rem;
        margin-bottom: 0;
    }

    .premierValue
    {
        grid-area: premierValue;
        grid-column: 1 / 1;
        grid-row: unset;
        padding-bottom: 0;
    }

    /* .eligibilityDashboard .eligibility-rewards-container .small-up-1 > .column
    {
        float: left;
        width: 50%;
    } */

     /* JJH lets see if these styles, copied from mobile help fix tablet spacing BINGO !!! */
     .offers-container h2 {
        padding-top: 1rem;
    }

    .offers-container h3 {
        padding-top: 0;
    }

    .offers-container.featured-partners h3 {
        padding-top: 0.675rem;
    }

    .offers-container .columnBlock {
        padding-top: 0;
        padding-bottom: 0;
    }

    .offers-container section {
        padding: 0;
    }

    .accordionComponent {
        padding-top: 0;
        padding-bottom: 0;
    }

    .accordionContainer {
        padding-top: 0;
    }

    .accordionComponent h2 {
        margin-bottom: 2rem;
    }

    .mobile-pT0 {
        padding-top: 0;
    }

    .offers-container.featured-partners h2 {
        padding-top: 0;
        padding-bottom: 1rem;
    }

    .accordionContainer .paragraphContainer {
        padding-top: 0;
    }

    .offers-container.featured-partners .paragraphContainer {
        padding-top: 0;
    }

    .modalTitleBar .close-button {
        line-height: 1;
        font-size: 2rem;
    }

    .column-flex.mobileNoPaddingLeftRight
    {
        padding-right: 0;
        padding-left: 0;
    }

}

@media screen and (max-width: 63.9375em) and (orientation: landscape)
{
    /*** calculator css ***/
    /* .calculator-component {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0;
    } */

    .calculatorBlock
    {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 1rem;
    }

    .spendingNeedsLabel
    {
        flex-direction: row;
        align-items: center;
    }

    .totalBorder
    {
        padding-left: 1rem;
    }

    .frameRow .spendingNeedsLabel
    {
        width: 150px;
    }

    .mainCalcContainer {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
    }

}

/* ipad air, 10, 11 Pro - Portrait */
@media only screen
  and (min-device-width: 810px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1.5)
{
    .calculator-component {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    .calculatorBody
    {
        padding-left: 0;
        padding-right: 0;
    }

    /* .calculator-container
    {
        max-width: 57rem;
        margin: 0 auto;
    } */

    .mainCalcContainer {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .frameRow .spendingNeedsLabel
    {
        width: 150px;
    }

    .totalBorder
    {
        padding-left: 1rem;
    }

}

/*** ipad mini - portrait ***/
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 768px)
  and (orientation: portrait)
{
    .calculatorValueRow, .calculatorLabelRow
    {
        display: grid;
        grid-template-columns: repeat(7, 119px 14% 6% 14% 6% 15% 10%);
        grid-gap: 10px;
    }

    .calculator-component
    {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    .calculatorBody
    {
        padding-left: 0;
        padding-right: 0;
    }

    .totalBorder
    {
        padding-left: 1rem;
    }

    .spendingNeedsLabel
    {
        grid-column: 7 / 8;
        width: 125px;
    }

    .calculatorBlock
    {
        padding-bottom: 1.5rem;
    }

    .equalSign, .plusSign
    {
        width: 50px;
    }

    .currentLabel, .currentTotal
    {
        grid-column: 6 / 7;
    }

    .flexGoalAmount
    {
        grid-column: 2 / 7;
    }

    .modalTitleBar .close-button {
        line-height: 1;
    }

}

/*** ipad air - landscape ***/
@media only screen
  and (min-device-width: 1080px)
  and (max-device-width: 1080px)
  and (orientation: landscape)
{
    /* .calculator-component
    {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
    } */

    .mainCalcContainer {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .modalTitleBar .close-button {
        line-height: 1;
    }

}


/* ipad 12 Pro - Portrait */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1.5)
{
    .frameRow .spendingNeedsLabel
    {
        width: 200px;
    }

    .totalBorder
    {
        padding-left: 3rem;
    }

    .modalTitleBar .close-button {
        line-height: 1;
    }

    .eligibilityProgress .tierOverlay .tierRestrictMessage
    {
        width: 100%;
        padding: 2rem 0 2rem 2rem;
    }

    #notifications-section .spread.container .spreadCol1
    {
        width: 12%;
    }

    #notifications-section .spread.container .spreadCol2
    {
        width: 88%;
    }

    #premier-value-bar
    {
        display: flex;
        flex-direction: column;
        flex-grow: unset;
        align-items: flex-start;
    }

}

/* tablets - Landscape */
@media only screen
  and (min-device-width: 810px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1.5)
{

    .calculator-component {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    .calculatorBody
    {
        padding-left: 0;
        padding-right: 0;
    }

    .calculator-container {
        max-width: 58rem;
        margin: unset;
    }

    /*** small data set css  - 3 months or less ***/
    .small-data-set
    {
        width: 50%;
    }

    .small-data-set .display-title-bar
    {
        flex-wrap: wrap;
    }

    .small-data-set .misc-block
    {
        justify-content: flex-start;
        margin: 0.5rem 0;
    }

    .small-data-set .misc-block .switchContainer
    {
        margin-left: 0;
    }

    .small-data-set .chart-dev-info
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /*** modal css */
    .dashboardWelcomeModal .modalContainer
    {
        padding: 0;
    }

    .modalTitleBar .close-button {
        line-height: 1;
    }

    #premier-value-bar
    {
        display: flex;
        flex-direction: column;
        flex-grow: unset;
        align-items: flex-start;
    }

}

@media only screen
  and (min-device-width: 1080px)
  and (max-device-width: 1080px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1.5)
{
    .calculator-container {
        max-width: 60rem;
    }
}


@media only screen and (min-device-width: 63.9375em)
{
    #my-practice-bar .dashboard-bar-label
    {
        font-size: 1rem;
        width: 155px;
        margin-right: 1rem;
    }

    .tierColumn:last-child .targetColumn
    {
        border-right: none;
    }

    .small-data-set .yoyBlock
    {
        flex-grow: 1;
    }

    .lobBlockGridGroup .columnContainer
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (min-width: 900px) and (orientation: landscape)
{
    .lobBlockGridGroup .columnContainer
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

}


@media only screen and (max-width: 1024px)
{

    /*** chart css ***/
    .chart-block .highcharts-legend-item
    {
        justify-content: center;
    }

    .chart-block
    {
        margin-top: 1.75rem;
    }

    .chart-block.pie
    {
        margin-top: 0;
    }

    .chart-block:first-child
    {
        margin-top: 0;
    }

    .chart-table-component
    {
        margin-bottom: 2rem;
    }

    .misc-block
    {
        display: none;
    }

    .chart-dev-info
    {
        flex-direction: column;
    }

    /*** card grid info mobile css ***/

    .card-grid-component .card-info-block
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 18px;
        background-color: white;
        margin: 0 1rem 1rem 1rem;
        padding: 1.5rem;
        width: auto;
        max-width: 100%;
    }

    .card-grid-component .card-info-container {
        flex-direction: column;
        justify-content: center;
    }

    .logoImageBlock { grid-area: unset; }

    .totalsBlock
    {
      grid-area: unset;
      text-align: left;
    }
    .cardStatRow { grid-area: unset; }
    .statusMessaging { grid-area: unset; display: none; }

    .logoImageBlock .image
    {
        margin-bottom: 0.3rem;
    }

    .totalsTitle
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.11px;
        color: inherit;
        line-height: 1.0;
        margin-bottom: 0.6rem;
    }

    .cardStatRow
    {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #marchonHistoricalDataSection .card-grid-component .card-info-block
    {
        /* display: grid;
        grid-template-columns: repeat(3, 1fr); */
        grid-template-rows: 25% auto;
        /* grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 12px;
        grid-row-gap: 18px;
        background-color: white;
        margin: 0;
        padding: 1.75rem;
        width: 100%;
        max-width: 720px;
        height: 100%; */
    }

    #marchonHistoricalDataSection .container {
        display: flex;
        flex-direction: column;
    }

    #marchonHistoricalDataSection .column-flex
    {
        width: 100%;
    }

    .statCaption br
    {
        display: none;
    }

    .statValue
    {
        margin-bottom: 0;
    }

}


@media only screen and (max-width: 1366px)
{
    .highcharts-container
    {
        flex-direction: column-reverse;
    }

    .chart-block.pie
    {
        width: 320px;
    }

    .chart-block.pie .legendContainer
    {
        width: 90%;
        margin: 0 auto;
    }

    .chart-block.pie .highcharts-root
    {
        width: 80%;
    }

    .chart-block .highcharts-legend-item
    {
        align-items: center;
        justify-content: center;
    }



    #premier-value-bar
    {
        display: flex;
        flex-direction: column;
        flex-grow: unset;
        align-items: flex-start;
    }

    /* .dashboard-bar-content {
        margin-bottom: 0.8rem;
    } */

}

/**** intended for landscape view on most tablets ****/
@media only screen and (min-device-width: 640px) and (max-device-width: 1366px) {

    /*** premier stats section - premier progress area ***/
    .eligibilityProgress
    {
        flex-wrap: wrap;
        padding-top: 1rem;
        justify-content: space-evenly;
    }

    .status-summary-block
    {
        align-items: flex-start;
    }

    .premier-progress-component {
        display: flex;
        align-items: center;
        padding-left: 1rem;
        width: 100%;
    }

    /*** pecaa stats section ***/
    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay
    {
        flex-wrap: wrap;
    }

    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay .spreadCol1
    {
        width: 100%;
    }

    .nonMemberPecaaDataSpread .container.standardPadding.hasBadgeOverlay .spreadCol2
    {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    #pecaaStatusInfoGraphic.pecaaDataPoints
    {
        width: 45%;
        margin: 0.5rem;
    }

    #purchaseProgress
    {
        width: 45%;
        text-align: center;
        padding: 2rem 0;
    }

}

/**** Overriding columns-module.css rule for iPad and iPad Pro ****/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .blockGrid3 .paragraphBlock .paragraphContainer {
        padding: 0;
    }

    .offers-container h2 {
        padding-top: 2rem;
    }

    .paragraphBlock.rightAlignment .iconImage {
        text-align: right;
    }
}

/**** THIS is the one for ONLY desktop and up ***/
@media only screen and (min-width: 65em) {

    /* .status-bar-container {
        padding-left: 1rem;
    } */

    .rebate-table .code-container:first-child {
        padding-left: 0;
    }

    .rebate-table .code-container:last-child {
        padding-right: 0;
    }

    .rebate-table .code-container:not(:first-child):not(:last-child) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* .offers-container .section-color-background1 */
    .offers-container .section-color-background1 {
        padding: 2.5rem 2rem 0;
    }

    /* .offers-container-card-layout .section-color-background1 */
    .offers-container-card-layout .row > div {
        padding: 2.5rem 1rem 1.5rem;
    }

    .offers-container-card-layout {
        margin-bottom: 1.5rem;
    }

    section.pageBodyRow section.mainDisplay
    {
        padding-right: var(--double-gutter-padding);
        padding-left: 0;
    }

    section.pageBodyRow aside.mainSidebar
    {
        padding-left: var(--double-gutter-padding);
        padding-right: var(--single-gutter-padding);
    }

    section.pageBodyRow aside.mainSidebar > div .paragraphBlock.column {
        padding-left: var(--double-gutter-padding);
        padding-right: var(--double-gutter-padding);
    }

    .nav-bar-container .nav-container-block .linkColumn
    {
        justify-content: space-between;
    }
}