img[src=""] {
    display: none;
}

section.section-blue {
    background-color: #00599D;
    color: #FFF;
}

.is-sticky .nav-bar {
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 500ms;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slideInAnimation {
	0% {
		top: -200px;
	}
	100% {
		top: 0;
	}
}

.is-sticky .nav-annual-fee, .is-sticky .nav-apply-btn {
    display: block !important;
}

@media (max-width: 639px) {
    .is-sticky .nav-annual-fee {
        display: none !important;
    }

    #page-title {
        text-align: center !important;
    }
}

#overview-apply-btn {
    padding: 16px 32px;
}

.tundra-3-bg {
    background: var(--accent-neutral-tundra-tundra-tint-3, #F3F7F8);
    border-radius: 8px;
    overflow: hidden;
}

.tundra-3-bg-color {
    background: var(--accent-neutral-tundra-tundra-tint-3, #F3F7F8);
}

.tundra-2-bg {
    background: var(--accent-neutral-tundra-tundra-tint-2, #E1EBEF);
}


/* Westjet page */


.priceless-container {
    border-radius: 8px;
    background: linear-gradient(87deg, #000 16.03%, rgba(0, 0, 0, 0.00) 80.97%), url("/credit-cards/transformer/img/cards/mastercard_priceless.webp") lightgray -19.086px -953.833px / 133.341% 429.346% no-repeat;
    /*background-size: cover;*/
    display: flex;
    max-width: 1164px;
    padding: 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-height: 303px;
    justify-content: center;
}

@media screen and (max-width: 639px) {
    .priceless-container {
        background-size: cover;
        background-position: 0;
    }
}


.priceless-container p {
    font-family: Roboto;
    font-size: 17.219px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.828px; /* 150% */
    letter-spacing: -0.239px;
}

.westjet-card-container {
    border-radius: 8px;
    background: var(--WestJet-Gradient, linear-gradient(0deg, #013C71 0%, #017F7C 100%));
}


.wj-custom-callout {
    border-radius: 8px;
    background: #FFF;
    max-width: 569px;
}

.wj-custom-callout-container {
    display: flex;
    max-width: 1170px;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    flex-wrap: wrap;
}


.wj-custom-callout-img {
    background-size: cover;
    height: 230px;
    width: 100%;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.wj-custom-callout-1 {
    background-image: url("/credit-cards/transformer/img/travel/callouts/wj-callout-companion.png");
}

.wj-custom-callout-2 {
    background-image: url("/credit-cards/transformer/img/travel/callouts/wj-callout-checkbags.png");
}

.wj-custom-callout-3 {
    background-image: url("/credit-cards/transformer/img/travel/callouts/wj-callout-statuslift.png");
}

.wj-custom-callout-4 {
    background-image: url("/credit-cards/transformer/img/travel/callouts/wj-callout-airportlounge.png");
}

#faq > .section-inner > h2:after {
        display: none;
}

.westjet-teal-gradient {
    background: linear-gradient(180deg, #013C71 0%, #017F7C 100%);
}

.wj-custom-callout-content {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.wj-custom-callout-content h4 {
    color: #252525;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Headings/🖥 - Desktop/H4 */
    font-family: "RBCDisplay";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
}

.wj-custom-callout-content p, .wj-custom-callout-content ul li {
    color: #252525;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Paragraphs/Styles/Form Label */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}


/* Travel Canada */

#travel-canada {
    .section-inner {
        padding-bottom: 15%;
    }
    
    background-color: #F3F7F8;
    position: relative;
    overflow: hidden;
}

#travel-canada .section-inner {
    position: relative;
}

#img-travel-canada {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

@media screen and (max-width: 1680px) {
    #travel-canada {
        .section-inner {
            padding-bottom: 209px;
        }
    }
}

@media screen and (max-width: 768px) {
    #travel-canada {
        .section-inner {
            padding-bottom: 30%;
        }
    }

    #img-travel-canada {
        width: 100vw;
        height: 200px;
        object-fit: cover;
    }
}

@media screen and (max-width: 640px) {
    #travel-canada {
        .section-inner {
            padding-bottom: 30%;
        }
    }

    #img-travel-canada {
        width: 100vw;
        height: 150px;
        object-fit: cover;
    }
}

@media screen and (max-width: 450px) {
    #travel-canada {
        .section-inner {
            padding-bottom: 40%;
        }
    }
}

/* Card details */

.card-image-caption-container {
    display: flex; 
    flex-direction: row;
    position: absolute;
    bottom: 24px;
    left: 24px;
    gap: 12px;
    align-items: flex-start;
}

@media screen and (max-width: 1024px) {
    .card-image-caption-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 640px) {
    .card-image-caption-container {
        flex-direction: row;
    }
}

.card-image-caption {
    display: inline;
    color: var(--text-foregrounds-text-2, #252525);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    padding: 3px 10px;
    background: var(--text-foregrounds-text-opposite-1, #FFF);
    border-radius: 4px;
}

.reward-card-container {
    background: linear-gradient(180deg, #A7CFDB 0%, #E7EEF1 100%);
    /* min-height: 326px; */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 90px !important;
}

.card-image-decoration-container {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.card-details-offer-container {
    border-radius: var(--Vertical-Spacing-Spacing-xs, 8px);
    border: 1px solid #FFB500;
    background: linear-gradient(180deg, rgba(255, 186, 0, 0.10) 0%, rgba(255, 186, 0, 0.00) 100%);
    padding: 22px 16px 16px 16px;
    position: relative;
}

.card-details-offer-container.right {
    padding: 32px;
}

.card-details-offer-caption {
    position: absolute;
    left: 16px;
    top: -11px;
    border-radius: 4px;
    background: var(--Interaction-interactive-accent-hover, #FFBA00);
    padding: 3px 10px;
    color: var(--text-foregrounds-text-2, #252525);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
}

.card-details-offer-content {
    color: var(--text-foregrounds-text-default, #1F1F1F);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.card-details-offer-container.right .card-details-offer-content {
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
    font-family: 'RBCDisplay';
}

.card-details-offer-additional {
    margin-top: 8px;
}

.card-details-offer-additional .additional-details {
    margin-top: 8px;
}

.card-detail-value {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: right;

}

.card-detail-value-extra {
    font-size: 12px;
    line-height: 20px;
    text-align: right;
}

.info-msg-box {
    border: 1px solid #979797;
    border-radius: 8px;
    padding: 22px 16px 16px 16px;
    background-color: #F3F4F5;
}

.info-msg-text {
    font-weight: 400;
    display: table;
}

.info-msg-text::before {
    content: url(/dvl/v1.0/assets/images/icons/icon-info.svg);
    display: table-cell;
    width: 24px;
    padding-right: 8px;
}

/* Bento Boxes */

.bento-grey {
    background: linear-gradient(114.37deg, #EDF7FC 0%, #FFFFFF 100%);
    border: 1px solid var(--text-foregrounds-text-disabled, #919191);
    border-radius: 13px;
    flex: 1;
    height: 528px;
    position: relative;
    min-width: 330px;
    max-width: 370px;
}

@media screen and (max-width: 768px) {
    .bento-grey {
        height: 460px;      
    }

    #img-phonehands, #img-padlock, #img-bluecheck {
        height: 196px;
    }
}       

#img-phonehands {
    width: 95%;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#img-padlock {
    bottom: 0px;
    right: 0px;
    width: 50%;
    position: absolute;
}

#img-bluecheck {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 75%;
}

#img-nomi {
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0;
    margin: auto;
    width: 85%;
}

@media screen and (max-width: 768px) {
    #img-nomi {
        width: 75%;
    }
}     

.rewards-light-blue {
    background: linear-gradient(180deg, #A7CFDB 0%, #E7EEF1 100%);
}

.rewards-dark-blue {
    background: linear-gradient(138.77deg, #0B3166 0%, #0051A5 100%);
}

.flex-col-gap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.flex-row-gap {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.flex-row-gap-overflow {
    display: flex;
    flex-direction: row;
    gap: 32px;
    overflow-x: auto;
}

.flex-1 {
    flex: 1;
}

@media screen and (max-width: 768px) {
    .flex-col-gap {
        gap: 24px;
    }
}

@media screen and (max-width: 640px) {
    .mob-flex-col-gap {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .mob-flex-row-gap {
        display: flex;
        flex-direction: row;
        gap: 24px;
    }
}


/* Start Travelling Sooner */

#sts {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: unset;
}

#sts-text {
    flex: 2;
}

#sts-img {
    flex: 1;
    max-width: 261.45px;
}

@media screen and (max-width: 768px) {
    #sts {
        margin-bottom: 30px;
    }

    #sts-img {
        position: absolute;
        bottom: -70px;
        right: 0px;
        width: 50%;
    }

    #img-phonehands {
        height: 62%;
    }
}

/* Icon copy block */

.icon-copy-header {

    font-family: "RBCDisplay";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    margin-bottom: 0px;

}

.icon-copy-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.icon-copy-item-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.icon-copy-title {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    margin-bottom: 2px;

}

.icon-copy-text {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
}

.card-icon-diamond::before {
    content: url(/credit-cards/transformer/img/icons/icon-diamond.svg);
    width: 32px;
    height: 32px;
}

.card-icon-umbrella::before {
    content: url(/credit-cards/transformer/img/icons/icon-umbrella.svg);
    width: 32px;
    height: 32px;
}

.card-icon-price-tag::before {
    content: url(/credit-cards/transformer/img/icons/icon-price-tag.svg);
    width: 32px;
    height: 32px;
}

.card-icon-ticket::before {
    content: url(/credit-cards/transformer/img/icons/ticket-icon.svg);
    width: 32px;
    height: 32px;
}

.card-icon-passport::before {
    content: url(/credit-cards/transformer/img/icons/icon-passport.svg);
    width: 32px;
    height: 32px;
}

.card-icon-currency-exchange::before {
    content: url(/credit-cards/transformer/img/icons/icon-currency-exchange.svg);
    width: 32px;
    height: 32px;
}

.card-icon-money-coin::before {
    content: url(/credit-cards/transformer/img/icons/icon-money-coin.png);
    width: 32px;
    height: 32px;
}

.card-icon-school::before {
    content: url(/credit-cards/transformer/img/icons/icon-school.svg);
    width: 32px;
    height: 32px;
}

.card-icon-plane::before {
    content: url(/credit-cards/transformer/img/icons/icon-plane.svg);
    width: 32px;
    height: 32px;
}

.card-icon-atm::before {
    content: url(/credit-cards/transformer/img/icons/icon-atm.svg);
    width: 32px;
    height: 32px;
}

.card-icon-accounts::before {
    content: url(/dvl/v1.0/assets/images/icons/icon-bank-accounts.svg);
    width: 32px;
    min-width: 32px;
    height: 32px;
    filter: grayscale(1);
}

.card-icon-shopping-cart::before {
    content: url(/credit-cards/transformer/img/icons/icon-shopping-cart.svg);
    width: 32px;
    height: 32px;
}

.card-icon-card-holder::before {
    content: url(/dvl/v1.0/assets/images/icons/icon-card-holder.svg);
    min-width: 32px;
    filter: brightness(0) saturate(100%) invert(14%) sepia(0%) saturate(2877%) hue-rotate(252deg) brightness(101%) contrast(98%);
}

.card-icon-cashes::before {
    content: url(/dvl/v1.0/assets/images/icons/icon-cash.svg);
    min-width: 32px;
    filter: brightness(0) saturate(100%) invert(14%) sepia(0%) saturate(2877%) hue-rotate(252deg) brightness(101%) contrast(98%);
}

.card-icon-gas-station::before {
    content: url(/credit-cards/transformer/img/icons/feature-icon-gas.svg);
    min-width: 32px;
    height: 32px;
    transform: scale(1.4);
    padding-top: 5px;
    padding-left: 5px;
}

.card-icon-plus::before {
    content: url(/credit-cards/transformer/img/icons/feature-icon-plus.svg);
    min-width: 32px;
    height: 32px;
    transform: scale(1.2);
    padding-top: 3px;
    padding-left: 3px;
}

.card-icon-star::before {
    content: url("/credit-cards/transformer/img/icons/icon-star.svg");
    width: 32px;
    height: 32px;
}

.card-icon-globe::before {
    content: url(/credit-cards/transformer/img/icons/icon-globe.svg);
    width: 32px;
    height: 32px;
}

.card-icon-flying::before {
    content: url(/credit-cards/transformer/img/icons/icon-hotel-plane.svg);
    width: 32px;
    height: 32px;
}

/* used in IOP page (Aug 30) */

#points-and-rewards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.points-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.points-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.points-square {
    border-radius: 8px;
    padding: 8px;
    background: #E7EEF1;
    margin-bottom: 0;

    font-size: 18px;
    font-weight: 500;
    line-height: 28px; /* 155.556% */

    white-space: nowrap;
}

.points-content {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px; /* 155.556% */
}

/* Token block */

.token-block-container,
.token-block-container-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 48px;
}

.token-block-container-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

@media screen and (max-width: 768px) {
    .token-block-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;
        grid-row-gap: 20px;
        grid-column-gap: 16px;
    }

    .token-block-header {
        margin-bottom: 24px !important;
        font-size: 24px !important;
        line-height: 30px !important;
    }
}

.token-block-header {

    font-family: "RBCDisplay";
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    text-align: center;

}

.token-block-item,
.token-content-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.token-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    gap: 0px;
    /* opacity: 0px; */
    background: #FFFFFF;
    border-radius: 100%;
    filter: drop-shadow(0px 3.591px 7.847px rgba(37, 37, 37, 0.08)) drop-shadow(0px 12.062px 26.357px rgba(37, 37, 37, 0.06)) drop-shadow(0px 54px 118px rgba(37, 37, 37, 0.04));
}

@media screen and (max-width: 640px) {
    .token-block-container,
    .token-block-container-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    .token-img-container {
        min-width: 60px;
    }

    .token-block-item {
        flex-direction: row;
    }
}

.token-img {
    width: 28px;
    height: 28px;
    top: 16px;
    left: 16px;
    gap: 0px;
    opacity: 0px;
    
}

.token-title {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    margin-bottom: 0px;
    
}

.token-text {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
}

/* Exclusive offers */

.exclusive-offer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

@media screen and (max-width: 768px) {
    .exclusive-offer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.exclusive-offer-content {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
}

.exclusive-offer-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.exclusive-offer-item .img-container {
    height: 60px;
    display: flex;
    align-items: center;
}

#petro-canada-img {
    max-width: 76.05px;
    width: 100%;
    max-height: 60px;
}

#rexall-img {
    max-width: 242px;
    width: 100%;
    max-height: 60px;
}

#hertz-img {
    max-width: 156.28px;
    width: 100%;
    max-height: 60px;
}

#doordash-img {
    max-width: 268px;
    width: 100%;
}

/* Calculator */

#spending-calculator {
    position: relative;
}

#calculator-slider label {
    padding-right: 10px;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#carousel-container {
    height: fit-content;
}

#shield-wave-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 17vw;
}

#shield-wave-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15vw;
}

.calculator-panel {
    color: black;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    height: fit-content;
}

.calculator-panel img {
    width: 100%;
}

.callout.calculator-panel {
    border-width: 0;
}

.slider-display {

    font-family: Roboto;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: right;

}

.slider-min-label {

    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;

}

.slider-max-label {

    font-family: Roboto;
    color: var(--Core-Neutral-grey-tint-1, #6F6F6F);
    min-width: 58px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;


}

.slider::before {
    content: '';
    height: 10px;
    width: 2px;
    background: #006AC3;
     
    display: block;
    position: absolute;
    top: calc(50% - 5px);
}

.slider::after {
    content: '';
    height: 10px;
    width: 2px;
    background: var(--Core-Neutral-grey-tint-1, #6F6F6F);
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: calc(0px + 30px)
}


.callout .carousel-wpr {
    margin-top: 0px !important;
    margin-bottom: 32px !important;
}


.calculator-summary-h5 {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    margin-bottom: 10px;
}

.calculator-summary-label {

    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;

}

.calculator-summary-numeric {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: right;
}

.calculator-summary-result-numeric {
    font-family: Roboto;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.25999999046325684px;
    text-align: right;
}

.calculator-result-blue-background {
    background: #E3F4FF;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.slider-wpr .slider {
    margin-left: 30px;
}

.carousel-item {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.carousel-img,
.calculator-img {
    max-width: 1000px;
    width: 100%;
    max-height: 237px;
    margin: 0px !important;
    object-fit: cover;
}

.carousel-wpr .carousel-inner .carousel-item img, .centered, .centered-block, .centered-margin, .centered-table, .table-center {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.carousel-body {
    padding: 32px;
    padding-bottom: 8px;
}

.calculator-body-container {
    padding: 32px;
}

.calculator-body-container sup a {
    color: #fff !important;
}

.calculator-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.calculator-gift-label-container {
    position: absolute;
    top: 40%;
    left: 26.667%;
    right: 30.877%;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.calculator-gift-label {
    width: 100%;
    max-width: 242px;
    text-align: center;
    margin: 0 !important;
}

.carousel-content {
    max-width: 100%;
}

.carousel-title,
.calculator-title {
    margin-bottom: 16px;
}

.carousel-paragraph,
.calculator-paragraph {
    margin-top: 16px;
    margin-bottom: 16px
}

.carousel-link,
.calculator-link {
    padding-top: 8px;
    display: block;
    /* margin-bottom: 24px; */
}

.carousel-link::after {
    content: url("/dvl/v1.0/assets/images/ui/ui-chevron-right-blue.svg");
    position: relative;
    right: -10px;
    display: inline-block;
    width: 6px;
    height: 10px;
    line-height: 0;
}

.irs-min {
    display: none;
}

.irs-max {
    display: none;
}

.irs-line::before {
    content: "$0";
    color: blue;
}

.irs-line::after {
    content: "$10,000";
    color: blue;
}

@media (max-width: 639px) {
    .larger-h4-mob {
        font-size: 2.4rem !important;
        line-height: 3rem !important;
    }
    .slider-wpr .slider {
        display: block !important;
    }
    .slider-wpr .slider {
        width: calc(100% - 164px);
        margin-right: 30px;
    }
    .carousel-img,
    .calculator-img {
        height: 190px;
    }
    .more-details-btn {
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        letter-spacing: normal !important;
    }
    .custom-callout-img {
        height: 150px;
        width: 100%;
        background-size: cover;
        background-position: 50%;
    }
}

/* Possibilities */

.possibilities-img {
    max-height: 150px;
    object-fit: contain;
}

/* Awards */
.award-img {
    width: 134.46px;
    height: 120px;
}

.award-img.bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.award-text {

    font-family: Roboto;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 24px;
    text-align: center;

}

/* More Details */

.more-details-btn {

    font-family: Roboto;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.25999999046325684px;
    text-align: left;

}

/* CTA */

.p-sm {

    font-family: Roboto;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;

}

.cta-card-img-container {
    background: linear-gradient(180deg, #A7CFDB 0%, #E7EEF1 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.cta-img {
    max-width: min(278px, 25vw);
    /* height: min-content; */
}

.cta-btn {
    width: 143px;
}

@media screen and (max-width: 768px) {
    .cta-img {
        margin: 43px;
    }
}

@media screen and (max-width: 640px) {
    .cta-img {
        max-width: 278px;
        height: 175px;
    }
}

/* Mini Card View */

.mini-card {
    border: 1px solid var(--Core-Neutral-grey-light-tint-4, #E0E0E0);
    min-width: 294px;
    max-width: 370px;
    height: 100%;
    background: #fff;
}

.mini-card-name {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    max-width: 250px;
    padding-right: 15px;
}  

.mini-card-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--accent-neutral-tundra-tundra-tint-3, #F3F7F8);
    min-height: 150px;
}

.mini-card-offer-caption {
    position: absolute;
    border-radius: 19.5px;
    background: var(--Interaction-interactive-accent-hover, #FEDF01);
    padding: 4px 12px;
    color: var(--text-foregrounds-text-2, #252525);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    text-transform: capitalize;
}

.mini-card-content {
    padding: 20px 24px;
}

.mini-card-sub-details {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 20px 0;
}

.mini-card-sub-details > div {
    flex: 1;
}

.mini-sub-detail-label {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    margin-bottom: 2px;
}

.mini-sub-detail-value {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.mini-annual-fee-label {
    font-family: Roboto;
    text-wrap: nowrap;
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    text-align: right;
}

.mini-annual-fee-value {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    text-align: right;
}

.mini-annual-fee-sub {
    font-family: Roboto;
    font-style: italic;
    background-color: yellow;
}

.mini-card-img-container > img {
    width: 158.08px;
    height: 95px;
}

.btn-compare {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 50px;
    background: #fff;
    color: #1F1F1F;
    font-size: 1.6rem !important;
    line-height: 2.4rem !important;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
    border: none !important;
    margin-top: 0px !important;
    padding: 0 !important;
}

/* Utility */

.standalone-link-after {
    display: inline-block;
    text-decoration: none;
    position: relative;
}

.standalone-link-after:after {
    content: url("/dvl/v1.0/assets/images/ui/ui-chevron-right-blue.svg");
    position: absolute;
    right: -15px;;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 6px;
    height: 10px;
    line-height: 0;
}

.collapse-toggle {
    max-width: none;
}

.responsive-flexbox {
    display: flex;
}

.responsive-flex-direction-row {
    flex-direction: row;
}

.responsive-flex-direction-column {
    flex-direction: column;
}

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

.flex-one {
    flex: 1;
}

.flex-two {
    flex: 2;
}

.gap-32 {
    gap: 32px;
}

.gap-30 {
    gap: 30px;
}

.gap-24 {
    gap: 24px;
}

.gap-16 {
    gap: 16px;
}

.gap-12 {
    gap: 12px;
}

.scrollable-x {
    overflow-x: auto;
}

.scrollable-x.eh-wpr {
    flex-wrap: unset;
}

.flex-justify-center {
    justify-content: center !important;
}

.flex-align-items-center {
    align-items: center !important;
}

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

.responsive-horizontal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.responsive-horizontal-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.responsive-horizontal-grid-4d-2m {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

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

.border-none {
    border: none;
}

@media screen and (max-width: 768px) {

    .responsive-flex-direction-row  {
        flex-direction: column;
    } 

    .responsive-horizontal-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .responsive-horizontal-grid-3,
    .responsive-horizontal-grid-4d-2m {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.accordion-title-desc {
    padding-top: 5px !important;
    color: #1F1F1F;
}

/* Calculator */

#calc-mobile .accordion-panel>.collapse-toggle.collapsed:after {
    margin-top: 21px;
    margin-right: 19px;

    border-radius: 8px;
}

#calc-mobile .accordion-panel>.collapse-toggle:after {
    margin-top: 21px;
    margin-right: 19px;

    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#calc-mobile .accordion-panel>.collapse-toggle.collapsed {
    border-radius: 8px;
}

#calc-mobile .accordion-panel>.collapse-toggle {
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* Energized Rewards */

#energized-rewards img {
    width: 167px;
}

#energized-rewards .extra-rewards {
    width: 80px;
    height: 80px;
    position: absolute;
    left: -50px;
    top: -15px;
    border-radius: 40px;
    background-color: #FEDF01;
    color: #252525;
    font-size: 40px;
    font-weight: 500;
    display: grid;
    align-items: center;
    text-align: center;
}

/* IOP */

@media screen and (max-width: 640px) {
    .iop-calculator-img {
        width: 100%
    }
}

/* used in BAP, but most likely it will be used in other pages too */

.content-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.content-grid-container .content-grid {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FFF;
}

.content-grid-container .content-grid .content-grid-img {
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
}

.content-grid-container .content-grid .content-grid-content {
    padding: 24px;
}

@media screen and (max-width: 640px) {
    .content-grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Override */

.standalone-link-img {
    width: 6px;
    height: 10px;
    margin-left: 4px;
    margin-top: -2px;
}

@media screen and (max-width: 420px) {
    .disclaimer {
        overflow-wrap: anywhere;
    }
}

.collapse-toggle span.no-wrap {
    display: inline;
}

/* Containers */

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

@media screen and (max-width: 768px) {
    .responsive-flex {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 640px) {
    .desktop-only-flex {
        display: none !important;
    }
    .mobile-only-flex {
        display: flex !important;
    }
}

@media screen and (min-width: 640px) {
    .mobile-only-flex {
        display: none !important;
    }
    .desktop-only-flex {
        display: flex !important;
    }
}