﻿/* Top Navigation Bar */

/*@media (min-width: 1601px) {
    The length at which width becomes static
    Need to apply to header/body/footer
    .navbar-custom .topbar {
        margin: 0 auto;
        max-width: 96rem;
    }
}*/

:root {
    /* Fix logo size */
    --ct-logo-lg-height: 37px;
    --ct-logo-sm-height: 37px;
}

.logo-topbar {
    /* Remove padding */
    padding: 0;
}

.d-flex.align-items-center.gap-lg-2.gap-1 {
    /* Add padding to topbar group */
    padding: 0px 12px;
}

@media (max-width: 375px) {
    .d-flex.align-items-center.gap-lg-2.gap-1 {
        /* Center search */
        margin-top: 0.5rem;
        /* Full width */
        width: 100%;
    }

    .sc-main-header-search .sc-search .sc-search-field {
        /* Remove excess padding */
        padding-right: 0;
    }
}

@media (min-width: 375px) {
    .d-flex.align-items-center.gap-lg-2.gap-1 {
        /* Increase gap */
        gap: 2.375rem !important;
        /* Increase width */
        width: 100%;
    }

    .sc-main-header-search .sc-search .sc-search-field {
        /* Remove excess padding */
        padding-right: 0;
    }
}

@media (min-width: 576px) {
    .d-flex.align-items-center.gap-lg-2.gap-1 {
        /* Increase gap */
        gap: 1.5rem !important;
    }
}

@media (min-width: 768px) {
    /* Increase gap */
    .d-flex.align-items-center.gap-lg-2.gap-1 {
        gap: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    .navbar-custom {
        padding: 0;
    }
}

@media (min-width: 992px) {
    .d-flex.align-items-center.gap-lg-2.gap-1 {
        /* Increase gap */
        gap: 1.5rem !important;
        /* Expand width */
        width: 80%;
    }
}

@media (min-width: 1601px) {
    .topbar {
        max-width: 100.0625rem;
    }
}

.app-search.dropdown.d-block {
    /* Expand width */
    width: inherit;
}

.navbar-custom .topbar .app-search form {
    /* Expand width */
    max-width: inherit;
}

.topbar-header {
    font-size: 26px;
    font-family: canada-type-gibson, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    border-radius: .5rem;
    white-space: nowrap;
}

.navbar-custom {
    -webkit-box-shadow: none;
    box-shadow: none;
    position: fixed;
    width: -moz-available;
    width: -webkit-fill-available;
}

/* Sub Top Navigation Bar */

.sc-sub-header {
    border-bottom: .0625rem solid #d5dee4;
    z-index: 49;
    background-color: #fff;
    position: relative;
    padding-top: 70px;
}

.sc-sub-header-wrapper {
    margin: 0 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 2rem;
}

.club-wrapper.sc-v2-hdr {
    position: relative;
    font-size: .875rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    width: auto;
    color: #424242;
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1rem;
}

.club-wrapper.sc-v2-hdr .flyout-trigger {
    padding: 0;
    white-space: nowrap;
    border: 0;
    margin: 0;
    text-align: left;
    text-decoration: none;
    gap: 0 .3125rem;
}

.club-wrapper.sc-v2-hdr .title {
    position: relative;
    padding-right: .25rem;
    white-space: nowrap;
    cursor: pointer;
    color: #516069;
    font-weight: 400;
}

.club-wrapper.sc-v2-hdr .club-name {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 7rem;
    text-transform: capitalize;
    color: #0067a0;
    font-weight: 500;
}

.sc-chevron-button svg {
    width: .625rem !important;
    height: .625rem !important;
}

.bst-btn-ghost {
    border: 0;
    border-radius: .25rem;
    height: auto;
    padding: 0;
    color: #0067a0;
    background-color: #fff
}

@media (min-width: 1601px) {
    .sc-sub-header {
        justify-items: center;
    }
    .sc-sub-header-wrapper {
        max-width: 96rem;
        width: -webkit-fill-available;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
}

div#page-top {
    position: relative;
    top: -70px;
}

/* Body */

html,body{
    overflow-x: hidden;
}

.card {
    box-shadow: none;
}

.card-body-no-padding {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0;
    color: var(--ct-card-color);
}

.card-wrapper {
    box-shadow: var(--ct-box-shadow);
}

h1:focus {
    outline: none;
}

.carousel {
    width: -webkit-fill-available;
}

.carousel-inner .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.my-carousel {
    text-align: -webkit-center;
    justify-self: center;
}

.carousel-item {
    transition: -webkit-transform .6s ease-in-out;
}

#carousel-header {
    float: left;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 2rem 0rem;
}

#carousel-drug-list {
    display: flex;
}

#carousel-drug-list .row {
    overflow: auto;
    justify-content: space-around;
    scrollbar-width: none;
}

.carousel-header-text {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

#carousel-drug-list .thumb-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: .0625rem solid #d5dee4;
    border-radius: .5rem;
    padding: 1rem .625rem;
    align-items: center;
    height: 15rem;
}

#carousel-drug-list .thumb-placeholder-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: .0625rem solid #d5dee4;
    border-radius: .5rem;
    padding: 1rem .625rem;
}

p.item-type {
    margin-top: 0;
    margin-bottom: 1rem;
}

.thumb-content h3 {
    margin-top: 1rem;
}

.quantity-content {
    padding: .5rem 0rem;
}

p.item-quantity {
    font-size: 10px;
    margin: 0px;
}

p.item-price {
    margin-top: .5rem;
}

.thumb-content {
    text-align: center;
}

/*#carousel-drug-list .carousel-inner {
    padding: 0rem 3rem;
}*/

#carousel-drug-list .carousel-control-prev, #carousel-drug-list .carousel-control-next {
    inline-size: max-content;
}

#carousel-drug-list .row {
    flex-wrap: nowrap;
}

.body-container {
    padding: 0rem 1.5rem;
}

.sc-thumbnail-story-feature-service-img {
    height: max-content;
    width: -webkit-fill-available;
    width: -moz-available;
}

.healthcare-benefits .sc-thumbnail-story-feature-service-img {
    height: 18.5rem;
}

.sc-thumbnail-story-feature-service-image .sc-image-wrapper {
    width: inherit;
    background-color: initial;
}

.sc-thumbnail-story-feature-service-image-position-top .sc-thumbnail-story-feature-service-image {
    height: 19.0625rem;
}

.sc-thumbnail-story-feature-service-container {
    box-shadow: none;
    margin: 0;
    max-width: none;
}

@media (min-width: 992px) {
    .sc-thumbnail-story-feature-service-container  {
        height: 33rem;
    }
}

.sc-thumbnail-story-feature-service-content {
    padding: .5rem 0rem;
}

@media (min-width: 1601px) {
    .main-content {
        max-width: 100.0625rem;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
}

.card-solo-title {
    justify-items: center;
    margin-bottom: 1.25rem;
}

.price-check-dropdowns {
    display: flex;
    justify-content: flex-start;
    gap: 0rem 1.5rem;
    flex-wrap: wrap;
}

.sc-pharmacy-prescriptions-nav {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.drug-search-pricing-information {
    font-size: 1.5rem;
    text-align: center;
    color: #424242;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

table.dataTable td {
    vertical-align: middle;
}

table.dataTable tbody tr td {
    line-height: 1.5;
}

hr.drug-search-separator {
    margin: 3rem 0rem 1.5rem 0rem;
}

.rxpricelist-title {
    justify-self: center;
    padding: 0rem 0rem 1.5rem 0rem;
}

i.plus {
    color: #0067a0;
}

element.style {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

table#scroll-horizontal-datatable {
    border-bottom-style: hidden;
    margin: 0 !important;
}

table#scroll-horizontal-datatable-rxpricelist {
    border-bottom-style: hidden;
    margin: 0 !important;
}

.sc-footer-desktop-footer-crm h3 {
    font-weight: 600;
}

/*.bst-btn-ghost {
    color: #fff;
    background-color: transparent; 
}*/

button#carouselPlayBtn {
    padding-top: 6px;
}

button#carouselPauseBtn {
    padding-top: 6px;
}

#right-hand-plus {
    background-color: #0067a0;
    text-align: center;
    padding: 3rem 2rem;
    background-image: url(https://scene7.samsclub.com/is/image/samsclub/20230417-petmed-plus-m?wid=768&fmt=png);
    background-position: center;
    background-size: cover;
}

#right-hand-plus .scc-btn {
    background-color: #fff !important;
    color: #0067a0 !important;
}

#right-hand-plus .scc-img {
    max-width: 352px;
    width: 50%;
    margin: 1rem auto 2rem;
}

/*#right-hand-plus {
    background-color: #0067a0;
    text-align: center;
    padding: 3rem 2rem;
    background-image: url(https://scene7.samsclub.com/is/image/samsclub/20230417-petmed-plus-m?wid=768&fmt=png);
    background-position: center;
    background-size: cover;
}*/

.scc-pov {
    background-color: #94ebff;
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    padding: 0;
    margin-bottom: 1.5rem;
}

.header-account-links-button {
    width: 5.625rem;
    height: 2.5rem;
    margin-bottom: .75rem;
    font-size: .875rem !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-weight: 500;
    text-align: center;
    align-content: center;
}

.align-items-end h1 {
    margin-bottom: 1.5rem;
}

/* For Sign in Flyout */
.Grid {
    display: flex;
}

.drug-image img {
    max-height: 150px;
    border-radius: .5rem;
}

.nav-tabs.nav-bordered li a.active {
    border-bottom: 2px solid #0067a0;
}

.nav-tabs.nav-bordered li a:hover {
    color: #024B71;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #0067a0;
}

.drugInfoSubtitle {
    font-size: smaller;
}

.card.drug-card {
    padding: 1rem;
    border: 1px solid;
    border-color: #ccc;
    border-radius: .5rem;
}

.placeholder-justify-right {
    justify-items: right;
}

.placeholder-justify-center {
    justify-items: center;
}

.placeholder-center {
    place-items: center;
}

/* Hide last separator in saved price list */
#rxpricelist-cards hr:last-of-type.price-list-separator {
    display: none !important;
}

/* Hide Rx Price List when under Drug Information tab */
.tabs-container:has(.tab-pane#druginfo-b1.active) > #rxpricelist-section {
    display: none !important;
}


/* Temporary toggle overrides for display purposes */
.toggle-member-price {
    visibility: hidden !important;
}
.d-sm-none .toggle-member-price {
    display: none !important;
}
/*.toggle-plus-price {
    padding-right: 1rem;
}*/
.toggle-insurance-price {
    visibility: hidden !important;
}
.d-sm-none .toggle-insurance-price {
    display: none !important;
}

/* END Temporary toggle overrides for display purposes */


/* Member Prescription Savings Table */

.member-savings {
    border-radius: 4px;
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
}

.member-savings-heading {
    background-color: #EAEFF1;
}

.sc-pharmacy-member-savings-right-icon {
    height: .75rem;
}


/* END Member Prescription Savings Table */

.sc-find-clubs {
    min-width: 17rem;
}

.sc-find-clubs-actions {
    justify-content: right;
}

.justify-items-center {
    justify-items: center;
}

#drugCarouselInner {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: max-content;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    overflow: hidden;
}

.custom-qty-hidden {
    display: none;
}

.hyper-border-color {
    border-color: var(--ct-border-color);
}

.max-height {
    height: -webkit-fill-available;
    height: -moz-fill-available;
}

.sc-card-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #424242;
}

@media (max-width: 425px) {
    button .bst-btn.bst-btn-large.bst-btn-secondary {
        width: -webkit-fill-available;
        margin: 0;
    }
    .sc-footer-desktop-footer-crm input {
        width: -webkit-fill-available;
    }
    .bst-text-input {
        width: -webkit-fill-available;
    }
}

@media (min-width: 576px) {
    .text-sm-nowrap {
        white-space: nowrap;
    }
    .overflow-sm-hidden {
        overflow: hidden !important;
    }
}

@media (min-width: 768px) {
    .sc-pharmacy-content-price-transparency-popular-search-items {
        width: 66%;
    }
}

@media (max-width: 767.98px) {
    .sc-pharmacy-join-now-cards {
        justify-content: space-around;
        margin: 0;
        width: -webkit-fill-available;
        align-self: center;
        max-width: none;
    }

    .sc-pharmacy-benefits-container .sc-pharmacy-benefits-benefit-icons {
        display: flex;
        flex-direction: row;
        width: -webkit-fill-available;
        justify-content: space-around;
    }

    .sc-pharmacy-benefits-container .sc-pharmacy-benefits-row-empty {
        display: none;
    }

    .card-body-carousel {
        padding: 0px;
    }

    #carousel-header {
        padding: 0rem 2rem 2rem 0rem;
    }

    /*.tab-content > .active {
        display: flex;
        flex-wrap: wrap;
    }*/

    .body-container {
        padding: 0;
    }

    img.d-block.img-fluid.img-desktop {
        content-visibility: hidden;
    }

    a.bst-link.bst-link-small.bst-link-primary {
        gap: 0;
    }

    .sc-main-header-account-link a {
        pointer-events: none;
    }

    .sc-pharmacy-benefits-container .sc-pharmacy-benefits-benefit-name {
        width: 24rem;
    }

    .sc-pharmacy-benefits-container .sc-pharmacy-benefits-benefit:first-child {
        border-top: .0625rem solid rgba(66, 66, 66, .2) !important;
    }
}

@media (min-width: 768px) {
    #right-hand-plus .scc-copy {
        flex: 1;
        padding: 0 2rem;
    }

    #right-hand-plus .scc-img {
        margin: 0 1rem;
        width: auto;
        height: 100%;
    }

    .sc-pharmacy-join-now-cards {
        justify-content: space-around;
    }

    #rx {
        margin: 1.5rem 0;
    }

    .scc-col {
        margin: 0;
    }

    .scc-row {
        margin: 1.5rem -0.5rem;
    }

    img.d-block.img-fluid.img-mobile {
        content-visibility: hidden;
    }

    #more .scc-copy {
        padding: 0 2rem 2.5rem 2rem;
    }

    .four-column {
        width: calc(25% - 0.75rem);
    }

    a.bst-link.bst-link-small.bst-link-primary.wellness {
        width: max-content;
        display: contents;
    }

    .scc-pov {
        display: flex;
        align-items: center;
        width: auto;
        background-image: url(https://scene7.samsclub.com/is/image/samsclub/20230417-petmed-pov-d_bg?wid=1536&fmt=png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        flex-direction: row-reverse;
        position: relative;
        min-height: 350px;
    }
}

@media (min-width: 992px) {
    #right-hand-plus .scc-copy {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #right-hand-plus .scc-btn {
        white-space: nowrap;
    }
    #rxpricelist-cards {
        border: 1px solid;
        border-radius: 0.5rem;
        border-color: #ccc;
        overflow: hidden;
    }
    #rxpricelist-cards .card.drug-card {
        border: none;
        margin: 0;
    }
}

@media (min-width: 1200px) {
    #right-hand-plus .scc-copy {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    #right-hand-plus .scc-desktop-only {
        display: none !important;
    }
    #right-hand-plus .scc-mobile-only {
        display: block !important;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    #right-hand-plus .scc-custom-banner {
        display: flex;
        flex-wrap: nowrap;
        position: relative;
        flex-direction: row;
        align-items: center;
    }

    #right-hand-plus {
        text-align: left;
        padding: 0;
        background-image: url(https://scene7.samsclub.com/is/image/samsclub/20230417-petmed-plus-d?wid=1536);
        background-position: left center;
        background-size: cover;
    }
}

.drug-title-image-row {
    display: flex;
    justify-content: space-between;
}

.dataTables_scroll {
    overflow: auto;
}

.table_wrapper {
    box-shadow: var(--ct-box-shadow);
}

.drug-carousel-container {
    position: relative; /* so we can absolutely-position the prev/next arrows */
    width: 100%;
    overflow: hidden; /* hide the overflow from the flex track */
    margin: 0 auto;
    max-width: 1200px; /* optional max width; adjust as needed */
}

.drug-carousel {
    display: flex;
    gap: 1rem; /* space between items, or use margin on .drug-item */
    transition: transform 0.3s ease-in-out;
    will-change: transform; /* helps performance */
}

.drug-item {
    flex: 0 0 auto; /* fixes the width so it doesn't shrink */
    width: 215px; /* your requested fixed width */
    background-color: #fff; /* or any styling you like */
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1rem;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 5; /* so they appear above the .drug-carousel */
}

.carousel-arrow-prev {
    left: 0;
}

.carousel-arrow-next {
    right: 0;
}

/* Optional: style your arrow icons, or rely on the Bootstrap icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
}

#carousel-drug-list .col-sm-3 {
    width: 16rem;
}

.sc-email-box-align-bottom form button {
    width: auto;
}

.sc-footer-desktop-footer-crm .sc-email-box-dls-wrapper, .sc-footer-desktop-footer-crm .sc-text-subscription-form {
    flex-direction: row;
    flex-wrap: wrap;
}

.sc-pharmacy-service-policies-description {
    font-size: .75rem;
    color: #4a4a4a;
    margin-bottom: 3rem;
}

.sc-pharmacy-benefits-container .sc-pharmacy-benefits-benefit:first-child {
    border-top: 0;
    padding-bottom: 1rem;
}

.sc-pharmacy-benefits-container .sc-pharmacy-benefits-benefit:last-child {
    border-bottom: .0625rem solid rgba(66, 66, 66, .2);
}

.sc-pharmacy-benefits-container .sc-pharmacy-benefits-row-description {
    flex: .4;
}

#rx {
    margin: 1.5rem 0;
}

.scc-row {
    margin: 1.5rem 0;
}

#more .scc-copy {
    margin-bottom: 0;
}

.sc-pharmacy-content-price-transparency-popular-search {
    max-width: none;
    padding: 1.5rem 1rem;
}

.sc-pharmacy-content-price-transparency-popular-search-items ul.sc-menu-items-grid > li.sc-grid-item {
    width: auto !important;
}

.sc-grid-image-card, .sc-grid-image-card-image, .sc-grid-image-card a {
    width: 100%;
}

.darken-image {
    filter: brightness(0.95);
}

.bottom-margin {
    margin-bottom: 1.5rem;
}

.sc-grid-items {
    justify-content: space-between;
}

.sc-pharmacy-join-now.d-flex.d-sm-flex.d-md-none {
    flex-direction: column;
}

.sc-pharmacy-content-price-transparency-member-savings {
    max-width: -webkit-fill-available;
}

.placeholder-default-width {
    width: 12rem;
}

/* Placeholders */

/*.sc-services-large-title-card-button,*/ .actual-text,
.actual-image {
    display: none;
}

.placeholders {
    display: block;
}

/*.placeholders, .placeholder {
    display: none !important;
}*/

/* Placeholders */  

.sc-pharmacy-content-price-transparency-faq {
    border-bottom: none;
    border-top: none;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Disable pointer events on the entire anchor area */
.carousel-control-prev,
.carousel-control-next {
    pointer-events: none;
}

/* Re-enable pointer events on just the icon */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    pointer-events: auto;
}

.bst-btn-primary, .bst-btn-primary:hover {
    color: #fff !important;
}

span.rx-price-list-title {
    font-size: 1.5rem;
    color: #424242;
}

.carousel-indicators {
    background: #fffc;
    border-radius: 15px;
    margin: 1rem auto;
    padding: 0.1rem 1rem;
    width: min-content;
}

.carousel-indicators [data-bs-target] {
    background-color: #74767c;
}

/*.scc-custom-banner {
    max-inline-size: min-content;
    justify-self: center;
}*/

.sc-pharmacy-content-price-transparency-faq-plus-mem {
    border-left: none;
    text-align: center;
}

/* Footer */

#right-hand-ad-space {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.5rem;
    justify-content: space-around;
}

@media (max-width: 576px) {
    .sc-layout.opus-layout {
        flex-wrap: wrap;
    }
}

.sc-footer-desktop-footer-crm .sc-footer-desktop-subscriptions {
    flex-wrap: wrap;
}

.sc-layout.opus-layout {
    display: flex;
}

@media (max-width: 1051px) {
    hr.bst-divider.bst-divider-vertical.bst-divider-solid.bst-divider-grey {
        display: none;
    }
}

/* Color Theme Changes */

html[data-topbar-color=dark] {
    /* Color dark topbar blue */
    --ct-topbar-bg: #0067a0;
    /* Color searchbar white */
    --ct-topbar-search-bg: #ffffff;
    /* Table border color */
    --ct-table-border-color: #D5DEE4;
}

.text-primary {
    color: #0067a0 !important;
}

/* Reusable */

/* Used for separation*/
.vertical-line {
    width: 1px;
    height: 1.5rem;
    background-color: #5597bb;
    margin: 0 .5rem 0 .75rem;
    transform: rotate(180deg);
}