/* SFMono Fonts CSS  */
@font-face {
    font-family: "SFMono-Regular";
    src: url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Regular.woff2') format('woff'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Regular.woff') format('truetype'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Regular.otf') format('svg');
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "SFMono-Semibold";
    src: url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Semibold.woff2') format('woff'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Semibold.woff') format('truetype'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Semibold.otf') format('svg');
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}

@font-face {
    font-family: "SFMono-Bold";
    src: url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Bold.woff2') format('woff'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Bold.woff') format('truetype'), url('https://nationscdn.azureedge.net/nb-container/fonts/SFMono/SFMono-Bold.otf') format('svg');
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

/*
================================================
Buttons
================================================
*/
.dashboard {padding-bottom: 46px;}
.dashboard .btn{padding:15px 24px;min-width:160px;min-height:48px;align-items:center;justify-content:center;display:inline-flex;}
.btn:hover, .btn:focus, .btn.active{box-shadow:0 4px 14px 0 rgb(0 0 0 / 10%);}
.btn-primary{background:var(--primary-color);border-color:var(--primary-color);}
.btn-primary:hover, .btn-primary:focus, .btn-primary.active{background:var(--primary-hover-color);border-color:var(--primary-hover-color);--bs-btn-active-bg:var(--primary-hover-color);--bs-btn-active-border-color:var(--primary-hover-color);--bs-btn-disabled-bg:var(--cadetblue-color);--bs-btn-disabled-border-color:var(--cadetblue-color);}
.btn-primary:disabled, .btn-primary.disable{background:var(--cadetblue-color);border-color:var(--cadetblue-color);}
.icon-border-btn {border:1px solid var(--secondary-color);background-color:var(--white-color);color:var(--secondary-color);font-size:18px;font-weight:700;}
.icon-border-btn:focus, .icon-border-btn:hover, .icon-border-btn:focus, .btn.icon-border-btn:active{border:1px solid var(--secondary-color);background:#f7f7f7;color:var(--secondary-color)}
.icon-border-btn img{margin:0;}


/* Maket Place Banner Section CSS */
.marketplace-banner{display:flex;padding:0 80px 0 24px; margin:0; background:url(https://nationscdn.azureedge.net/otc-container/images/albertson-banner.jpg) no-repeat right center;border: 1px solid var(--light-bg-color);border-radius: 6px;justify-content:space-between;flex-direction: row-reverse;overflow:hidden;align-items:center;min-height:200px !important;position:relative;}
.marketplace-banner:after{background:url(https://nationscdn.azureedge.net/otc-container/images/market-pattern.png) repeat left top;content: '';position: absolute;left: 0;top: 0;width:100%;height: 100%;z-index: 9;}
.marketplace-banner:before{background: linear-gradient(90.01deg, #FFFFFF 57.77%, rgba(255, 255, 255, 0) 85.88%);content:'';position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;}
.marketplace-banner p{color:var(--woodsmoke-color);font-size:24px;font-weight:400;line-height:30px;margin:0 0 24px;}
.marketplace-banner-img{display: flex;justify-content: end;align-items: center;max-width:290px; top:24px;}
.marketplace-banner-left img{max-width:100%;margin:0 0 12px;width:auto !important;}
.marketplace-banner-left .store{font-size:40px;line-height:48px;font-weight:700;color:var(--woodsmoke-color);margin:0 0 0 8px;}
.marketplace-banner-left button{min-width:200px;}
.marketplace-banner-left, .marketplace-banner-img{position:relative;z-index:10;}
.albertson-shop-wrap{position:relative;}
.albertson-shop-btn{padding:0px 19px !important; border-radius:6px;}
/* Maket Place Banner Section CSS */

/* Earn Rewards  Section CSS */
.rewards-section{padding:40px 0 0;}
.rewards-section .rewards-card{width:100%;border: 1px solid var(--light-bg-color);border-radius: 8px;padding: 24px 40px 24px 24px;background: var(--white-color);margin-bottom:42px;}
.rewards-section .earn-reward{background: linear-gradient(98.05deg, var(--secondary-color) 7.74%, #0065A9 94.97%);border-color:var(--secondary-color)}
.rewards-section .rewards-card-content{position:relative;padding:0 0 56px 0px;width:100%;}
.rewards-section .rewards-card-content h4 {font-weight:600; color:var(--woodsmoke-color);}
.rewards-section .rewards-card p{line-height:24px;color:var(--nevada-color);font-weight:400;font-size:18px;}
.rewards-section .earn-reward h4, .rewards-section .earn-reward p{color:var(--white-color);}
.rewards-section .rewards-card-img {max-width: 200px;margin-left: 24px;justify-content: center;}
.rewards-section .rewards-card-img img{width:100%;}
.rewards-section .banner-btn{bottom:0;position:absolute;min-width:135px;padding:15px 24px;font-weight:600;font-size:18px;line-height:18px;border-radius:8px;color:var(--white-color);background:var(--primary-color);}
.rewards-section .earn-reward .banner-btn{color:var(--secondary-color);background:var(--white-color);}
.gap-24{gap:24px;}

/* Flex card Section CSS */
.flex-card{background:var(--white-color); padding:0px;padding: 40px 0px 32px;border: 0; margin:0px;}
.customer-card {font-family: "SFMono-Regular";background: linear-gradient(139.27deg, #0F5673 46.87%, #AE5580 73.5%, var(--secondary-color) 100.14%);padding:34px 30px 73px;overflow: hidden;border-radius: 18px;min-height: 260px;color: var(--white-color);font-size: 22px;line-height: 26px;margin:0 0 12px;border:none;}
.customer-card img{max-height:24px;margin:0 0 29px;width:156px;}
.customer-card .validity span{font-size: 20px;line-height: 23px;letter-spacing: 0px;}    
.customer-card .validity span:first-child {font-family: "SFMono-Bold";font-size: 9px;line-height: 8px;letter-spacing: -0.54px;display:inline-block;margin:0 8px 0 0;}
.customer-card .validity .customer-name {font-size: 20px;font-weight: 600;line-height: 23px;letter-spacing: 0px;}
.customer-card .customer-name{margin-bottom:0px;}
.flex-card .card-status{font-size:16px;line-height:20px; margin:12px 0 24px;}
.flex-card .card-status .status{border:1px solid transparent;padding:4px 16px 3px; text-transform:capitalize; border-radius:50px; letter-spacing:0.17px; display:inline-block;font-size:14px;line-height:18px;font-weight:500;background:transparent;}
.flex-card span.status.status-lowercase {text-transform: lowercase;}
.flex-card span.status.status-lowercase:first-letter {text-transform: capitalize;}
.flex-card .card-status .status.active{border-color:#0FA91C;background-color:#ECF3ED;}
.flex-card .card-status .status.ready{border: 1px solid #33BDE3;background-color: var(--secondary-light-color);}
.flex-card .section-top-left h3{line-height:29px; margin-bottom:8px; letter-spacing:0.25px;}
/*.flex-card .section-top-left p{line-height:24px;}*/
.flex-card .section-top{margin:0 0 32px;}
.flex-card button img{margin:2px 0 0 7px;}
.flex-card.section-gap .card-image img {width: 100%;}
.card-status-sec{display:flex; align-items:center;font-size:20px; line-height:24px;}
.card-status-sec .card-status-text{margin-left:25px;}
.card-status-sec .card-status-text {position: relative;}
.card-status-sec .card-status-text:before {position: absolute;content: "";height: 24px;width: 1px;background: rgba(177, 185, 193, 1);left: -12px;}
/* Flex card Wallets Section CSS */
.wallet-section h6{font-size: 14px;font-weight: 600;line-height: 18px;letter-spacing: 1.5px;margin:0;text-transform:uppercase;}
.wallet-section .wallet-balance-card{flex:inherit; max-width:33.33%;}
.wallet-section .wallet {background: #FFFFFF;border: 1px solid #B1B9C180;padding:16px;border-radius: 6px;}
.wallet-section .wallet p{font-size:14px;line-height:17px; font-weight:500; letter-spacing:0.22px;color:var(--nevada-color);margin:0 0 6px;}
.wallet-section .wallet h4{margin:0 0 6px;display:flex;align-items:center; font-weight:600;}
.wallet-section .wallet h4 img{margin:0 8px 0 0;}
.wallet-section .wallet .wallet-type{display:flex;align-items:center;justify-content:space-between;}
.wallet-section .wallet .expires{margin-bottom:0; font-weight:400;}
.wallet-section .wallet .expires span{color:var(--nevada-color)}
.wallet-section .wallet .expires strong{color:var(--woodsmoke-color); font-weight:600;}
.card-activate{font-size: 20px;font-weight: 500;line-height: 24px;letter-spacing: 0em;}
.card-activate a {font-size: 18px;font-weight: 600;line-height: 22px;letter-spacing: 0; margin-left:12px;}
/*Ready To Activate css*/
.ready-activate-sec {}
.ready-activate-sec .wallet{ background: #FFFFFF;border: 1px solid #B1B9C180;padding: 24px;border-radius: 6px; margin:0px 0px  24px;}
.ready-activate-sec .wallet p {font-size: 16px;line-height: 20px;font-weight: 500;letter-spacing: 0.22px;color: var(--woodsmoke-color);margin: 0 0 24px;}
.ready-activate-sec .wallet h4{margin:0px; font-weight:600;}
.ready-activate-sec{position:relative;}
.activate-title {margin: 30px 0 0;padding-top: 32px;}
.ready-activate-sec .activate-title h3 {text-align: center;font-size: 16px;line-height: 22px;color: var(--secondary-blue-dark);font-weight: 600;background-color: #fff;padding: 0 16px;position: absolute;left: 0;right: 0;top: -12px;max-width: 170px;margin: 0 auto;z-index: 9;}
.ready-activate-sec .activate-title:before {height: 1px;width: 50%;content: "";position: absolute;background: linear-gradient(270deg, var(--primary-color) 0%, rgba(242, 93, 74, 0) 100%);z-index:0;left: 0;top: 0px;}
.ready-activate-sec .activate-title:after {height: 1px;width: 50%;content: "";position: absolute;z-index: 0;right: 0;background: linear-gradient(270deg, var(--primary-color) 0%, rgba(242, 93, 74, 0) 100%);-webkit-transform: rotate(180deg);top: 0px;}
.ready-activate-sec a + a::after {content: "";position: absolute;border-right: 1px solid var(--nevada-color);height: 15px;right: auto;left: 0;margin-left: auto;margin-right: auto;top: 4px;}
.ready-activate-sec .custom-link:nth-child(1){padding-right:0px;}
.ready-activate-sec a + a {padding-left: 16px;position: relative;}
.ready-activate-sec .wallet .custom-link {border-bottom: 1px solid var(--secondary-blue-dark); text-decoration:none; line-height:16px;}
/* Flex card Wallets Section CSS end */

/* Benefit BalanceUse Modal Popup CSS */
.custom-popups .modal-content {padding: 24px 32px;}
.custom-popups h2{font-size: 24px;font-weight: 700;line-height: 36px;text-align: center;width: 100%;}
.custom-popups .modal-body{padding:0px;}
.custom-popups .modal-header{padding:0px;}

.benefit-balance-card .md-text {font-size: 14px;font-weight: 500;line-height:18px; color:var(--nevada-color);margin:0 4px 0 0;}
.benefit-balance-card .md-text button{background:none;}
.benefit-balance-card .card {padding: 16px; width:100%;border: 1px solid #B1B9C180; display:flex; height:100%;min-height:82px;}
.benefit-balance-card p {font-size: 12px;font-weight: 500;line-height: 14px;color: var(--nevada-color); margin-bottom:6px;}
.benefit-balance-card h3 {margin-bottom: 4px;font-size: 24px;font-weight: 600;line-height: 30px;}
.benefit-balance-card .card-body {padding: 0;display:flex;align-items:center;justify-content:space-between;}
.benefit-balance-card .col{max-width:50%;}
.benefit-balance-card .card.active .shop .md-text, .benefit-balance-card .card:hover .shop .md-text {color: var(--secondary-color);text-decoration: none;}
.benefit-balance-card .card.active .shop svg, .benefit-balance-card .card:hover .shop svg {fill: var(--secondary-color);}
.benefit-balance-card .card.active, .benefit-balance-card .card:hover {margin-right: 0px;border-color: var(--secondary-color);cursor:pointer;}
.benefit-balance-card .card:hover {margin-right: 0px;border-color: var(--secondary-color);cursor:auto;}
.benefit-balance-card .shop-title p {display: flex;align-items: center;}
.benefit-balance-card .img-block{display:flex; justify-content:end;}
.products-card {height:100%;min-height: 215px;display: flex;border-radius: 6px;border: 1px solid #E9ECF0;padding: 24px; position:relative; overflow:hidden;}
.products-card .special-title img.img-fluid {max-width: 183px;max-height: 29px;margin-bottom: 12px;}
.products-card .benefit-balance-img img {max-height: 208px;max-width: 208px;position: absolute;bottom: -27px;right: -67px;}
.products-card  .btn.icon-border-btn {position: absolute;bottom: 24px;}
.products-card .special-title{padding-bottom:50px;}
.products-card .special-title h4 {margin-bottom: 12px;}
.products-card .special-title p {font-size: 16px;line-height: 28px;font-weight: 400;color:var(--woodsmoke-color);}
.products-card.btn.icon-border-btn {position: absolute;bottom: 24px;height: 36px;min-height: 36px;line-height: 34px;}
.products-card.shop-grocery-pattern {background: url(https://nationscdn.azureedge.net/otc-container/images/shop-grocery-pattern.svg) repeat left top;background-size: contain;}
.products-card.shop-pantry-pattern {background: url(https://nationscdn.azureedge.net/otc-container/images/shop-pantry-pattern.svg) repeat left top;background-size: contain;}
.products-card.nationsmarket-pattern {background:url(https://nationscdn.azureedge.net/otc-container/images/nationsmarket-pattern.svg) repeat left top;background-size: contain;}
.products-card.products-pattern {background: url(https://nationscdn.azureedge.net/otc-container/images/products-pattern.svg) repeat left top;background-size: contain;}
.products-card.albertson-pattern {background: url(https://nationscdn.azureedge.net/otc-container/images/groceries-pattern.svg) repeat left top;background-size: contain;}
.products-card.xtramlarge-tile {height: auto;padding: 0;margin: 0;}
.benefit-balance-card .md-text a{color:var(--nevada-color);}
.benefit-balance-card .card:hover a{color:var(--secondary-color);}
.products-card .special-title .icon-border-btn, .products-card .special-title .icon-border-btn a{color:var(--secondary-color);}
.products-card .special-title .icon-border-btn:hover, .products-card .special-title .icon-border-btn a:hover{color:var(--secondary-color);}

/* Shop By Popular Categories Section CSS */
.dashboard .popular-categories {margin: 36px 0 40px;padding-top: 0px !important;}
.popular-categories .section-top p{color:var(--nevada-color)}
.img-block{border-radius:6px;overflow:hidden;display: flex;align-items: end;position:relative;color:var(--woodsmoke-color);justify-content:center;}
.img-block img{max-width:100%;}
.category-name{font-size:22px;font-weight:600;line-height:26px;position:absolute;left:16px;top:16px;right:16px; display:flex; align-items:start; justify-content: space-between;}
.category-img{width: 100%;height: 85%;justify-content: end;display: flex;align-items: end;}
.popular-list{min-height:345px;}
.popular-grid .row{min-height:100%;}
.xtrasmall-tile{height:80px;justify-content:end;}
.small-tile{height:93px;justify-content:end;}
.xtramedium-tile{height:160px;}
.medium-tile{height:227px;}
.xtramlarge-tile{height:240px;}
.large-tile{height:344px;}
.small-tile img{max-height:80px;}
.xtramedium-tile img{max-height:120px;}
.medium-tile img, .xtramlarge-tile img{max-height:170px;}
.large-tile img{max-height:320px;}
.bg-bathroom-safety{justify-content:end;}
.bg-bathroom-safety img{max-height:70px;}
.benefit-balance-card .img-block{transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.popular-categories .section-top-left {margin-bottom: 8px;}
.popular-grid .img-block:hover, .benefit-balance-card .img-block:hover{box-shadow:0 2px 15px 0 rgb(160 180 199);}

/* Welcome popup css CSS */
.welcome-wallet-icon{width:24px;}
.search-wrap {max-width: 640px;}
.multi-card-banner .alert-bottom-space {margin-bottom:0px;}
.multi-card-cont.alert-bottom-space .owl-carousel {margin: 0;padding: 0;}
/*agent header*/
.unsubscribeContainer .unsubscribeBlock .bg-btn {background-color: var(--primary-color);}
.shop button:hover{color:var(--secondary-color) }

.cca-card{background:#B61F29; color:var(--white-color); padding:16px 24px; border-radius:6px;box-shadow: 0px 2px 8px 0px #0E0A1F14;  display:flex; justify-content:space-between; align-items:center; height:100%; cursor:pointer;}
.cca-card p {line-height: 20px;margin-bottom: 0;font-size: 16px;}
.cca-card .cc-card-icon{margin-right:16px;}
.cca-card h6 {margin: 0px 0px 4px;font-size: 18px;line-height: 22px;font-weight: 600;}
.flex-card.section-gap.custom-borders.app-store-section{background:var(--white-color); padding:0px;}
.app-store-section .otc-app-store-info img{max-width:100%; height:40px; margin-top:32px;}
.app-store-section .app-kit-icon{margin-bottom:32px;}
.app-store-section .access-benefit-text{font-size:20px; line-height:28px; color:#646F7d; margin-bottom:0; max-width:460px;font-weight:400;}
.app-store-section .otc-app-store-info {display: flex;align-items: center;justify-content: start;}
.app-store-section .section-gap {padding: 48px 0 32px;margin: 0 0 40px;position: relative;}

/*Health Benefits css*/
.popular-categories.health-benefits{background: var(--Secondary-Indigo-gradient, linear-gradient(98deg, #00497A 7.74%, #0065A9 94.97%));padding: 32px 0px !important;}
.health-benefits .popular-grid .img-block:hover,
.health-benefits .benefit-balance-card .img-block:hover,
.health-benefits .popular-grid .img-block {box-shadow: none;border-radius: 12px;background: var(--Grayscale-Porcelain, #F5F6F8);height: 200px;}
.health-benefits h3 {margin: 0 0 8px;color: #fff;}
.health-benefits p {font-size: 20px;line-height: 24px;color: #fff;margin: 0;font-weight: 400;}
.popular-categories.health-benefits .section-top-left p {margin-bottom: 32px;color: #fff;}
.popular-categories.health-benefits .category-name {font-size: 22px;font-weight: 600;line-height: 26px;position: absolute;left: 24px;top: 24px;right: 24px;display: flex;align-items: center;justify-content: start;}
.health-benefits .benefits-title h4 {display: flex;color: #00497A;font-size: 20px;font-style: normal;font-weight: 600;line-height: 21px;margin:0px 0px 3px;align-items:end;}
.health-benefits .benefits-title h4 span{font-size: 14px;font-style: normal;font-weight: 600;line-height: 18px;}
.health-benefits .benefits-title p {color:#646F7D;font-size: 14px;font-weight: 400;line-height: normal;margin:0px;}
.health-benefits .benefits-title {width: 100%;padding: 24px 0px 24px 24px;}
.health-benefits .category-img {max-width: 60%;justify-content: end;display: flex;align-items: end;position: absolute;right:0px;}
.health-benefits .img-block img {max-width: 100%;}

/*footer nwe desgin css*/
.footer-main-sec {padding:40px 0px;}
.footer-main-sec .sec1 img {margin-bottom: 34px;}
.footer-main-sec .sec1 .questions h2 {font-weight: 500;font-size: 20px;letter-spacing: 0;line-height: 20px;margin:0px 0px 6px;}
.footer-main-sec .sec2 h6 {position: relative;}
.footer-main-sec .sec2 h6:after {position: absolute;left: 0;right: 0;border:1px solid #F2604A;width: 33px;height: 1px;top: 24px;content:"";}
.footer-main-sec .sec4 .bbb-logo {margin: 0px 20px 0 0px;}
.footer-main-sec .copyrightSection {margin-top: 12px;}
footer .img-fluid.nb-logo-footer {max-width: 170px;height: 40px;}
footer.footer-main-sec .sec1 .questions p {font-size: 16px;margin-bottom: 18px;display: inline-block;line-height: 22px;border-bottom: 1px solid #F2604A;padding-bottom: 2px;}
footer.footer-main-sec .sec1 .questions .phone-no {border-bottom: none;padding-bottom: 0px;}
footer.footer-main-sec .sec2 {margin-top: 60px;}
footer.footer-main-sec .sec2 ul {margin-top: 16px;}
footer.footer-main-sec .sec2 ul li a {color: var(--woodsmoke-color);font-size: 16px;line-height: 24px;font-weight: 400;}
footer.footer-main-sec .sec2 ul li {padding: 0px 0px 16px;}
footer.footer-main-sec .sec1 .questions p {font-size: 16px;padding-bottom: 18px;display: inline-block;line-height: 24px;border-bottom: 1px solid #F2604A;}
footer.footer-main-sec .sec4 p {line-height: 24px;}
footer.footer-main-sec .aetna-text{background-color: #f1d06b2e; padding:5px 8px;}
footer.footer-main-sec .aetna-text a {color: #efb74d;padding:0px; margin:0px; line-height:24px; display:inline-block;}

@media (min-width:1920px) {
    .modal-benefit {max-width:1208px;}
    /*Search css*/
    .search-wrap {max-width: 790px;}
    /* Flex card Wallets Section CSS */
    .wallet-section .wallet p{font-size:16px; line-height:20px; }
    .wallet-section .wallet .expires span{font-size:14px; line-height:17px;}
    .flex-card .card-status {font-size: 20px;line-height: 24px;}
    .product-card h3{font-size:18px; line-height:22px;}
    .card-sec-main .card-left-sec {flex: 0 0 auto;width: 25%;}
    .card-sec-main .wallet-section {flex: 0 0 auto;width: 75%;}
}


@media (min-width:1366px) and (max-width:1919px) {
    .modal-benefit {max-width: 872px;}

    /* Flex card Wallets Section CSS */
    .flex-card .row > [class*="col-"] {padding: 0 12px;}
    .wallet-section .wallet-balance-card{max-width:50%;}
    .flex-card .section-top-left h3{font-size:32px; line-height:29px;}
    .section-gap .section-top p{font-size:20px; line-height:24px;}
    .wallet-section{margin-bottom:24px;}
    .wallet-section .wallet p{font-size:12px; line-height:15px;}
    .wallet-section .wallet .expires{font-size:14px; line-height:17px;}
    .wallet-section .wallet h4{line-height:30px;}
    .customer-card .customer-name, .validity{font-size:20px; line-height:23px; font-weight:600;}
    .customer-card .validity{font-weight:400;}
    .customer-card .card-number{font-weight:400; font-size:22px; line-height:26px;}
    .rewards-section .rewards-card-img{max-width:130px;}
    .flex-card .card-status{line-height:24px;}
    .NationsMarket-dashboard-dev .section-top-left h3{line-height:29px;}
    .popular-grid .block-space{padding:0px 12px;}
    .popular-grid .block-space:first-child{padding-left:8px;}
    .popular-grid .block-space:last-child{padding-right:8px;}

    .card-status-sec .card-status-text{margin-left:16px;}
    .card-status-sec .card-status-text {position: relative;}
    .card-status-sec .card-status-text:before {position: absolute;content: "";height: 24px;width: 1px;background: rgba(177, 185, 193, 1);left: -8px;}
    .card-sec-main .card-left-sec {flex: 0 0 auto;width: 31%;}
    .card-sec-main .wallet-section {flex: 0 0 auto;width: 69%;}
}

@media (min-width:1280px) and (max-width:1365px) {
    .modal-benefit {max-width: 808px;}

    /* Flex card Wallets Section CSS */
    .wallet-section .wallet-balance-card{max-width:50%;}
    .flex-card .section-top-left h3{font-size:32px; line-height:29px;}
    .section-gap .section-top p{font-size:20px; line-height:28px;}
    .wallet-section{margin-bottom:24px;}
    .wallet-section .wallet p{font-size:12px; line-height:14px;}
    .wallet-section .wallet .expires{font-size:14px; line-height:17px;}
    .customer-card{padding:27px 27px 73px;}
    .custom-flex .section-top-left{max-width:57%;}
    .customer-card .customer-name, .validity{font-size:18px; line-height:21px; font-weight:600;}
    .customer-card .validity{font-weight:400;}
    .customer-card .card-number{font-weight:400; font-size:20px; line-height:23px;}
    .customer-card{padding:34px 27px 71px}
    .rewards-section .rewards-card-img{max-width:130px;}
    .rewards-section .rewards-card{margin-bottom:14px;}
    .card-sec-main .card-left-sec {flex: 0 0 auto;width: 31%;}
    .card-sec-main .wallet-section {flex: 0 0 auto;width: 69%;}
}
@media(min-width:1024px){
    .popular-grid .col-12 div:last-child a{margin:0 !important;}
}
@media (min-width:1024px) and (max-width:1279px) {
    .modal-benefit {max-width: 656px;}

    /*Welcome popup*/
    .products-card .benefit-balance-img img {max-height: 170px;max-width: 170px;position: absolute;bottom: -27px;right: -67px;}
    .benefit-balance-card .special-title {padding-bottom: 60px;}

    /* Flex card Wallets Section CSS */
    .wallet-section .wallet-balance-card{max-width:50%;}
    .flex-card .section-top-left h3{font-size:32px; line-height:29px;}
    .section-gap .section-top p{font-size:20px; line-height:28px;}
    .wallet-section{margin-bottom:24px;}
    .wallet-section .wallet h4{font-size:24px;}
    .wallet-section .wallet p{font-size:12px; line-height:14px;}
    .wallet-section .wallet .expires{font-size:14px; line-height:17px;}
    .customer-card{padding:27px 27px 73px;}
    .custom-flex .section-top-left{max-width:57%;}
    .customer-card .customer-name, .validity{font-size:18px; line-height:21px; font-weight:600;}
    .customer-card .validity{font-weight:400;}
    .customer-card .card-number{font-weight:400; font-size:20px; line-height:23px;}
    .customer-card{padding:32px 28px 71px}
    .rewards-section .rewards-card-img{max-width:144px;}

    .card-sec-main .card-left-sec {flex: 0 0 auto;width: 40%;}
    .card-sec-main .wallet-section {flex: 0 0 auto;width: 60%;}
}


@media (min-width:768px) and (max-width:1023px) {
    .modal-benefit {max-width: 720px;}

    /* Flex card Wallets Section CSS */
    .wallet-section .wallet-balance-card{max-width:100%;}
    .custom-flex{display:block !important;}
    .flex-card .section-top-left h3{font-size:32px; line-height:29px;}
    .ready-activate-sec .wallet h4 {margin: 0px 0px 24px;}
    .section-gap .section-top p{font-size:20px; line-height:28px;}
    .wallet-section .wallet-balance-card{max-width:100%;}
    .wallet-section{margin-bottom:24px;}
    .wallet-section .wallet h4{font-size:24px;}
    .wallet-section .wallet p{font-size:12px; line-height:14px;}
    .wallet-section .wallet .expires{font-size:14px; line-height:17px;}
    .section-gap .section-top-right button{padding:6px 16px !important; margin:16px 0 0 0px;}
    .section-gap .section-top-right button img{width:24px;}
    .customer-card{padding:24px 24px 57px;}
    .custom-flex .section-top-left {max-width: 100%;}
    .rewards-section .rewards-card-img{max-width:130px;}
    .item-card-full{max-width:100% !important;}
    .multi-card-banner .item-card{max-width:82%;}
    /*CCA css*/
    .cca-card{height:100%;}
    .card-sec-main .card-left-sec {flex: 0 0 auto;width: 50%;}
    .card-sec-main .wallet-section {flex: 0 0 auto;width: 50%;}
    .flex-card .card-status { font-size: 14px;}
}


@media(max-width:991px) {
    /* Maket Place Banner CSS */
    .marketplace-banner{padding-right:36px;}
    .marketplace-banner-img{max-width:201px;align-self:end;}
    .marketplace-banner-img img{max-width:100%;}

    .large-tile{height:354px;}
    .medium-tile{height:235px;}
    .xtramedium-tile{height:165px;}
    .xtramlarge-tile{height:248px;}

    .customer-card .customer-name, .customer-card .validity{font-size:18px; line-height:21px; font-weight:600;}
    .customer-card .validity{font-weight:400;}
    .customer-card .card-number{font-weight:400; font-size:20px; line-height:23px;}
    .customer-card{padding:29px 25px 57px}
}
@media(max-width:575px){
    .popular-categories .img-block img{max-height: 56px;}
    .popular-categories .img-block{height:56px;justify-content: end;}
    .img-block{margin:0 0 8px !important;}
    .category-name {font-size: 18px;font-weight: 600;line-height: 19px;position: absolute;left: 12px;top: 12px;right: 12px;}
}
@media(max-width:767px) {
    .single-product-sec .item-code {max-width: 130px;justify-content: center;}
    /* Maket Place Banner CSS */
    .marketplace-banner{justify-content:start;padding:24px;background:none;}
    .marketplace-banner-img {max-width: 140px;position: absolute;right: -24px;bottom:0;}
    .marketplace-banner p{font-size:16px;line-height:20px;}
    .product-card .add-cart, .product-card .product-btn {max-width: 150px;}

    /*Use benefit balance to shop popup*/
    .custom-popups .modal-content {padding: 24px;}
    .custom-popups h2 {font-size: 20px;line-height: 24px;}
    .benefit-balance-card .col {max-width: 100%; width:100%;}
    .benefit-balance-card h3 {font-size: 22px;line-height: 26px;}
    .benefit-balance-card p {font-size: 12px;line-height: 14px;}
    .products-card .benefit-balance-img img {max-height: 190px;max-width: 190px;bottom: -31px;right: -94px;}
    .category-name {font-size: 18px;line-height: 20px;left: 16px;top: 18px;}
    .product-card .prodcut-wallet {margin: 0 0 0px;}

    /* Flex card Wallets Section CSS */
    .custom-flex{display:block !important;}
    .flex-card .section-top-left h3{font-size:24px; line-height:30px;}
    .flex-card .card-status{margin-bottom:16px;}
    .custom-flex .section-top-right a:first-child{margin-right:8px;}
    .flex-card .section-top-right {display: block;}
    .flex-card.section-gap .section-top-right button {margin: 0;min-width: 218px;}
    .flex-card .section-top-right a {width: 100%;display: block;margin: 16px 0 0;}
    .ready-activate-sec .wallet h4 {margin: 0px 0px 16px;font-weight: 600;}
    .ready-activate-sec .wallet {margin: 0px 0px 16px; padding:16px;}
    .section-gap .section-top p{font-size:16px; line-height:20px;}
    .wallet-section .wallet-balance-card{max-width:100%;}
    .wallet-section{margin:24px 0px;}
    .card-activate a{display:block; margin-left:0px; margin-top:12px;}
    .wallet-section .wallet h4{font-size:24px; line-height:29px;}
    .wallet-section .wallet p{font-size:12px; line-height:14px;}
    .wallet-section .wallet .expires{font-size:14px;}
    .section-gap .section-top-right button{min-width:auto; min-height:36px; border-radius:4px; display:flex; justify-content:space-between; padding:6px 16px !important; margin-top:16px; align-items:center;margin-left:0px;}
    .section-gap .section-top-right button img{width:24px;}
    
    /* Earn Rewards  Section CSS */
    .rewards-section .rewards-card-content {padding: 0 0 56px 0px;}
    .rewards-section .rewards-card {margin-bottom: 16px;}
    .marketplace-banner-left .store {font-size: 24px;line-height: 30px;}
    .marketplace-banner-left .albertson-store {max-width:171px;} 

    /*CCA css*/
    .cca-card{margin-bottom:24px;padding: 6px 16px;}
    .app-store-content {text-align: center;padding:24px 4px 4px;}
    .app-store-section .access-benefit-text{margin:0 auto;}
    .app-store-section .section-gap h3 {margin: 0 0 8px;line-height: 28px;font-size: 24px;}
    .app-store-section .access-benefit-text {font-size: 18px;line-height: 20px;max-width: 100%;font-weight: 400;}
    .app-store-section .otc-app-store-info {justify-content: center;}
}