body {
    --img-zoom-result: 100%;
}

.qp-header-container {
    border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    height: 72px;
    width: 100%;
    padding: 8px 0;
}

.qp-header {
    max-width: 1220px;
    justify-content: space-between;
}

.qp-header .nav-item {
    font-size: 16px;
    font-weight: 500;
    /* color: #fff;
    opacity: 0.7; */
    cursor: pointer;
    text-align: right;
}

.qp-header.qp-header--full-width {
    max-width: none;
}

@media (min-width: 1440px) {
    .qp-header.qp-header--grid-view {
        max-width: none;
        justify-content: center;
    }
    .qp-header.qp-header--grid-view .qp-header__left-side {
        width: 100%;
        max-width: 1200px;
    }
    .qp-header.qp-header--grid-view .qp-header__right-side {
        width: 100%;
        max-width: 520px;
    }
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
}

@supports not (aspect-ratio: 2 / 1) {
    .image-wrapper::before {
        float: left;
        padding-top: 50%;
        content: "";
    }

    .image-wrapper::after {
        display: block;
        content: "";
        clear: both;
    }
}
.dropdown.updated-dropdown{
    position: absolute;
    top: 5px;
    right: 15px;
}

.dropdown.updated-dropdown .icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background: grey;
    border-radius: 100px;
    width: 30px;
    height: 30px;

}   

div.zoomImage {
    background-position: 50% 50%;
    position: relative;
    overflow: hidden;
    cursor: default;
    background-size: contain;
}
div.zoomImage img:hover {
    opacity: 0;
}
div.zoomImage img {
    transition: opacity .5s;
    display: block;
    width: 100%;
}

.zoom-button {
    position: absolute;
    top: 5px;
    right: 15px;
    cursor: pointer;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 22px;
    z-index: 3;
}

.zoom-button-inside {
    position: absolute;
    top: 55px;
    right: 15px;
    cursor: pointer;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 22px;
    z-index: 4;
}

.zoom-hint {
    display: none;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1px 4px;
    font-size: 10px;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
}

.zoom-hint.inside {
    padding: 2px 4px;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
}

.zoom-in {
    background: rgba(255, 255, 255, 0.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMgMTBoLTN2M2gtMnYtM2gtM3YtMmgzdi0zaDJ2M2gzdjJ6bTguMTcyIDE0bC03LjM4Ny03LjM4N2MtMS4zODguODc0LTMuMDI0IDEuMzg3LTQuNzg1IDEuMzg3LTQuOTcxIDAtOS00LjAyOS05LTlzNC4wMjktOSA5LTkgOSA0LjAyOSA5IDljMCAxLjc2MS0uNTE0IDMuMzk4LTEuMzg3IDQuNzg1bDcuMzg3IDcuMzg3LTIuODI4IDIuODI4em0tMTIuMTcyLThjMy44NTkgMCA3LTMuMTQgNy03cy0zLjE0MS03LTctNy03IDMuMTQtNyA3IDMuMTQxIDcgNyA3eiIvPjwvc3ZnPg==") center center no-repeat;
    filter: invert(1);
    background-size: 16px 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.zoom-in:hover {
    background: rgba(255, 255, 255, 0.8) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMgMTBoLTN2M2gtMnYtM2gtM3YtMmgzdi0zaDJ2M2gzdjJ6bTguMTcyIDE0bC03LjM4Ny03LjM4N2MtMS4zODguODc0LTMuMDI0IDEuMzg3LTQuNzg1IDEuMzg3LTQuOTcxIDAtOS00LjAyOS05LTlzNC4wMjktOSA5LTkgOSA0LjAyOSA5IDljMCAxLjc2MS0uNTE0IDMuMzk4LTEuMzg3IDQuNzg1bDcuMzg3IDcuMzg3LTIuODI4IDIuODI4em0tMTIuMTcyLThjMy44NTkgMCA3LTMuMTQgNy03cy0zLjE0MS03LTctNy03IDMuMTQtNyA3IDMuMTQxIDcgNyA3eiIvPjwvc3ZnPg==") center center no-repeat;
    filter: invert(1);
    background-size: 16px 16px;
}

.zoom-out {
    background: rgba(255, 255, 255, 0.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMgMTBoLTh2LTJoOHYyem04LjE3MiAxNGwtNy4zODctNy4zODdjLTEuMzg4Ljg3NC0zLjAyNCAxLjM4Ny00Ljc4NSAxLjM4Ny00Ljk3MSAwLTktNC4wMjktOS05czQuMDI5LTkgOS05IDkgNC4wMjkgOSA5YzAgMS43NjEtLjUxNCAzLjM5OC0xLjM4NyA0Ljc4NWw3LjM4NyA3LjM4Ny0yLjgyOCAyLjgyOHptLTEyLjE3Mi04YzMuODU5IDAgNy0zLjE0IDctN3MtMy4xNDEtNy03LTctNyAzLjE0LTcgNyAzLjE0MSA3IDcgN3oiLz48L3N2Zz4=") center center no-repeat;
    filter: invert(1);
    background-size: 16px 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.zoom-out:hover {
    background: rgba(255, 255, 255, 0.8) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMgMTBoLTh2LTJoOHYyem04LjE3MiAxNGwtNy4zODctNy4zODdjLTEuMzg4Ljg3NC0zLjAyNCAxLjM4Ny00Ljc4NSAxLjM4Ny00Ljk3MSAwLTktNC4wMjktOS05czQuMDI5LTkgOS05IDkgNC4wMjkgOSA5YzAgMS43NjEtLjUxNCAzLjM5OC0xLjM4NyA0Ljc4NWw3LjM4NyA3LjM4Ny0yLjgyOCAyLjgyOHptLTEyLjE3Mi04YzMuODU5IDAgNy0zLjE0IDctN3MtMy4xNDEtNy03LTctNyAzLjE0LTcgNyAzLjE0MSA3IDcgN3oiLz48L3N2Zz4=") center center no-repeat;
    background-size: 16px 16px;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /*set the size of the lens:*/
    width: 80px;
    height: 40px;
    cursor: zoom-in;
}

.img-zoom-result {
    position: absolute;
    display: none;
    top: 0;
    left:100%;
    z-index: 4;
    border: 1px solid #d4d4d4;
    /*set the size of the result div:*/
    width: 300px;
    height: var(--img-zoom-result);
}

.auction-item-badge {
    left: 12px;
    top: 12px;
    display: flex;
    padding: var(--spacing-xxs, 2px) 10px;
    align-items: center;
    border-radius: var(--radius-full, 9999px);
    
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.auction-item-badge.auction-item-badge--featured {
    color: var(--Component-colors-Utility-Orange-utility-orange-700, #B93815);
    border: 1px solid var(--Component-colors-Utility-Orange-utility-orange-200, #F9DBAF);
    background: var(--Component-colors-Utility-Orange-utility-orange-50, #FEF6EE);
}
.auction-item-badge.auction-item-badge--best-value {
    color: var(--Component-colors-Utility-Blue-light-utility-blue-light-700, #026AA2);
    border: 1px solid var(--Component-colors-Utility-Blue-light-utility-blue-light-200, #B9E6FE);
    background: var(--Component-colors-Utility-Blue-light-utility-blue-light-50, #F0F9FF);
}
.auction-item-badge.auction-item-badge--trending {
    color: var(--Component-colors-Utility-Brand-utility-brand-700, #6941C6);
    border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #E9D7FE);
    background: var(--Component-colors-Utility-Brand-utility-brand-50, #F9F5FF);
}

.video-icon {
    position: absolute;
    display: none;
    right: 14px;
    bottom: 5px;
    z-index: 4;
    border-radius: 50%;
    color: #676767;
    cursor: pointer;
    background: #fafafa;
    padding: 9px;
    font-size: 11px;
    line-height: 1;
}
.video-icon:hover {
    color: #363636;
}

.video-icon.video-icon--updated{
    position: absolute;
    right: 15px;
    top: 45px;
    z-index: 4;
    border-radius: 50%;
    color: white;
    text-align: center;
    background: grey;
    padding: 9px;
    font-size: 11px;
    line-height: 1;
    width: 30px;
    height: 30px;
}

.qp-header .org-icon {
    height: 36px;
    width: 36px;
}

.qp-header .org-name {
    align-content: center;
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}

.qp-header .header-info {
    line-height: 1;
    text-align: left;
    white-space: normal;
}

.qp-header .quick-link {
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
}
.qp-header .quick-link .nav-link{
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}

.qp-header .vEventOrg {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    opacity: .7;
    line-height: 1.2;
    margin: 0;
    padding: 3px 0;
}

.dropdown-menu.dropdown-menu--user-profile {
    width: 240px;
    margin-top: 8px;
    padding: 0;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);

    box-shadow: 0px 12px 16px -4px var(--Colors-Effects-Shadows-shadow-lg_01, rgba(16, 24, 40, 0.08)), 0px 4px 6px -2px var(--Colors-Effects-Shadows-shadow-lg_02, rgba(16, 24, 40, 0.03));
}

.dropdown-menu.dropdown-menu--user-profile .dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg, 12px);
    padding: 12px 16px;
}

.dropdown-menu.dropdown-menu--user-profile .profile-info {
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu.dropdown-menu--user-profile .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
}

.short-donation-desc {
    background-color: unset;
    text-align: left;
    box-shadow: none;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}

.quickPledgeSubItem {
    margin-bottom: 0.7rem !important;
    margin-top: 0;
    border: 1px solid rgba(97, 97, 97, .1);
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    cursor: pointer;
    /*background: #f9f9f9;*/
}

.quickPledgeSubItem .long-pledge-option {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.quickPledgeSubItem .card-body-wrapper {
    /*display: flex;*/
    /*align-items: flex-start;*/
    /*justify-content: flex-start;*/
    padding: 15px 20px;
}

.quickPledgeSubItem .card-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    /*padding: 25px 20px;*/
}

.quickPledgeSubItem .card-body .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0 13px;
}

.quickPledgeSubItem .card-body .preset-name {
    font-size: 16px;
    line-height: 1.1;
    color: #000;
    margin: 0;
    flex-grow: 2;
    text-align: left;
    padding-bottom: 8px;
}

.quickPledgeSubItem .card-body .text-wrapper .amount {
    font-size: 18px;
    line-height: 1;
    font-weight: 400 !important;
    color: #676767;
    padding: 0 13px 10px 0;
    margin: 0;
}

.option-desc-container .count,
.quickPledgeSubItem .card-body .text-wrapper .count {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.563vmin;!*12px; *!*/
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400 !important;
    color: #B0B0B3;
    /*margin-bottom: 10px;*/
    padding: 0 13px 10px 0;
    margin: 0;
}

.quickPledgeSubItem .card-body .counter-box {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400 !important;
    color: #B0B0B3;
    margin: 0;
    cursor: pointer;
    align-self: center;
    padding-left: 13px;
}
.user-party-wrapper .counter-box select,
.quickPledgeSubItem .card-body .counter-box select {
    min-height: 44px;
    min-width: 67px;
    border-color: rgba(0, 0, 0, 0.14);
    border-width: 0.5px;
    background-color: #F1F2F5 !important;
    border-radius: 5px !important;
    color: #000 !important;
    font-weight: 500;
    font-size: 12px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.5 !important;
    padding: 0 15px;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0) url("../../img/svg/virtual-event/shevron-bottom.svg") no-repeat scroll calc(100% - 16px) center / 10px auto;
}

.user-party-wrapper .counter-box select {
    min-width: 100px;
 }

.p2p-option-name {
    font-size: 18px;
    line-height: 21px;
    font-weight: 500!important;
    color: #000;
    margin: 0;
    flex-grow: 2;
}

.quickPledgeSubItem .image_card {
    width: 100%;
    border-radius: 5px;
}

@media (min-width: 576px) {
    .quickPledgeSubItem .image_card {
        width: 132px;
        height: 66px;
    }
}

.quickPledgeSubItem h4 {
    width: auto;
}

.object-fit-cover {
    object-fit: cover;
}

.org-icon {
    object-fit: cover;
    margin: 0;
    height: 56px;
    width: 56px;
}

.campaign-list-info .header-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: .5rem;
    align-items: center;
}

.campaign-list-info .header-wrapper .avatar {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    padding: 4px;
    box-sizing: border-box;
}

.campaign-list-info .org-icon {
    width: 92px;
    height: 92px;
}

.campaign-list-info .header-wrapper div.org-title {
    /*font-family: Roboto, "Helvetica Neue", sans-serif;*/
    font-weight: 500;
    font-size: 17px;
    color: #000;
    text-align: left;
    line-height: 1.25;
    width: 100%;
    margin-bottom: 9px;
}

.campaign-list-info .header-wrapper .about {
    font-size: 13px;
    font-weight: 400;
    color: #B0B0B3;
    text-align: left;
    line-height: 1.25;
}

.campaign-list-info .header-wrapper .website {
    font-size: 13px;
    font-weight: 400;
    color: #B0B0B3;
    text-align: left;
    line-height: 1.25;
    margin-bottom: 9px;
}

.quick-pay-footer {
    text-align: center;
    height: 40px;
    padding: 7px;
    background-color: #fff;
}

.quick-pay-footer .paybee-logo {
    height: 26px;
}
.quick-pay-footer.quick-pay-footer--embedded .paybee-logo {
    height: 22px;
}

.quick-pay-footer--embedded {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.quick-pay-footer--embedded a {
    color: rgba(0, 0, 0, 0.44);
}

.status-line {
    font-size: 14px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-weight: 400;
    line-height: 2;
    color: #272064 !important;
    background-color: rgba(27, 20, 64, .05);
    box-shadow: none;
    border-radius: 3px;
}

button.filter-btn {
    box-shadow: none;
    text-transform: capitalize;
    font-weight: 400;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    padding: 0;
}

.filter-btn:active, .filter-btn:focus, .filter-btn:hover {
    box-shadow: none;
    padding: 0;
}

.filter-count {
    text-transform: capitalize;
    font-weight: 400;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: rgba(0, 0, 0, 0.6);
}

.card-body .available {
    text-align: left;
    /*font-size: 1.563vmin;!*12px; *!*/
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5)
}

#eventList .campaign-card,
#campaignList .campaign-card {
    margin-top: 0 !important;
    /*background: #f9f9f9;*/
}

#eventList .campaign-card .card-body,
#campaignList .campaign-card .card-body {
    text-align: left;
    padding: 11px 15px 15px 15px;
    /*background: #f9f9f9;*/
}

#eventList .campaign-card .campaign-logo,
#campaignList .campaign-card .campaign-logo {
    border-radius: 8px 8px 0 0;
    /*background: #f9f9f9;*/
}

#featuredCampaign .campaign-logo {
    border-radius: 8px;
}

#featuredCampaign .campaign-type-wrapper {
    height: 28px;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1;
    padding: 3px 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
}

#featuredCampaign .campaign-type-wrapper span {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

#eventList .campaign-card .card-body .card-title,
#campaignList .campaign-card .card-body .card-title {
    text-align: left;
    font-weight: 700 !important;
    font-size: 18px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    margin: 0;
}

#eventList .campaign-card .card-body .event-date {
    text-align: left;
    font-weight: 500 !important;
    font-size: 15px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.3;
    color: #FF5896;
    margin: 13px 0;
}

#eventList .campaign-card .card-body .event-date span {
    margin-left: 10px;
    text-transform: uppercase
}

#featuredCampaign .card-body .card-title {
    text-align: left;
    font-weight: 700 !important;
    font-size: 19px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.3;
    margin: 0;
}

#featuredCampaign .card-body .campaign-desc {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
}
#eventList .campaign-card .card-body .campaign-desc,
#campaignList .campaign-card .card-body .campaign-desc {
    text-align: left;
    font-weight: 400;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.563vmin;!*12px; *!*/
    font-size: 12px;
    line-height: 1.5;
    /* add three dots after 2 lines of text*/
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp: 5;*/
    overflow: hidden;
    padding-top: 9px;

}

.goal-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;

    background: rgba(255, 255, 255, 0.98);
    padding-bottom: 1.25rem;
    padding-top: 1rem;
    height: 70px;
}

.campaign-list-card-goal {
    /*background: #f9f9f9;*/
    /*background: rgba(255, 255, 255, 0.98);*/
    /*height: 70px;*/
    width: 100%;
    margin: auto;
    padding-bottom: 0.5rem;
}

.campaign-list-card-goal .progress .progress-bar,
.goal-wrapper .progress .progress-bar {
    background-color: #25C157;
    height: 4px;
    border-radius: 0 2px 2px 0;
}

.org-info-right {
    display: flex;
    background-color: rgba(248, 249, 252, 1);
    border-radius: 16px;
    border: 1px solid rgba(231, 237, 240, 1);
    padding: 30px 32px 16px;
}

@media (min-width: 576px) {
    .campaign-info-right, .campaign-option-info-right {
        border-radius: var(--radius-3xl, 20px);
        border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
        background: var(--Colors-Background-bg-primary, #FFF);
        padding: 24px;
    }
}

.campaign-info-right.org-info-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    padding: 20px;
}

.campaign-desc {
    padding: 14px 0;
    text-align: left;
}

 .campaign-desc h4 {
    font-family: Roboto, "Helvetica Neue", sans-serif;
     /*font-size: 2.083vmin;!*18px; *!*/
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
}

.campaign-desc .about {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.57);
    line-height: 1.5;
}

.header-campaign-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    /*white-space: nowrap;*/
}

.header-campaign-name h4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding-right: 1rem;
}

.header-campaign-name .option-inline-share {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.option-inline-share {
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*padding: 10px 20px;*/
    /*margin-bottom: 1rem;*/
}

.co-campaign-title {
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: #B0B0B3;
    line-height: 1.57;
    text-align: left;
    margin: 0;
}

.co-campaign-name {
     /*font-size: 2.6vmin;!*20px; *!*/
    font-size: 20px;
    font-weight: 500;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: #000000;
    line-height: 1.25;
    text-align: left;
    margin: 0;
}

.co-campaign-container {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08)
}

.co-campaign-container img {
    border-radius: 13px;
    cursor: pointer;
}
.co-campaign-container .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.co-campaign-container .title-wrapper a {
    cursor: pointer;
    box-shadow: none;
}

.login-row {
    margin-bottom: 20px;
    padding: 7px;
    line-height: 1.5;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
    color: #B0B0B3;
    background-color: rgba(27, 20, 64, 0.05);
    border-radius: 3px;
}

.campaign-list-info .header-wrapper {
    margin-bottom: 13px;
}

.campaign-list-info .header-wrapper .org-title {
    text-align: left;
    /*font-size: 2.083vmin;!*16px; *!*/
    font-size: 16px;
    font-weight: 500;
    color: #272064;
}

.campaign-list-info .org-desc {
    text-align: left;
    /*font-size: 1.563vmin;!*12px; *!*/
    font-size: 12px;
    font-weight: 400;
    color: #B0B0B3;
}

.select-link {
    text-align: right;
    color: #272064;
    /*font-size: 1.693vmin;!*13px; *!*/
    font-size: 13px;
    font-weight: 400;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    border: none;
    background-color: white;
    /*background: #f9f9f9;*/
    padding: 0 20px 20px 20px;
}

.campaign-card-wrapper {
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: none;
    padding-bottom: 30px;
    cursor: pointer;
    /*max-width: 400px;*/
}

button.option-select-link:hover,
button.option-select-link:active {
    box-shadow: none;
    cursor: pointer;
}

.campaign-info-right .campaign-desc .header-campaign-name h4 {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
}

.campaign-info-right .campaign-desc .header-campaign-name h5 {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #25C157;
    line-height: 1.5;
    white-space: nowrap;
}

.md-tabs.md-tabs--option-list {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.md-tabs.md-tabs--option-list .nav-link {
    white-space: nowrap;
    border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

.md-tabs.md-tabs--option-list .nav-link.active {
    background-color: transparent;
    border-bottom: 2px solid var(--Colors-Foreground-fg-brand-primary_alt, #7F56D9);
    border-radius: 0;
}

@media (min-width: 992px) {
    .page__right-column {
        max-width: 520px;
    }
}

.campaign-goal .progress-raised,
.page__right-column .progress-raised {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-md, 24px);
}
.campaign-goal .progress-goal,
.page__right-column .progress-goal {
    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px);
}

.page__right-column .campaign-description,
.page__right-column .org-description {
    color: var(--colors-text-text-tertiary-600, #475467);
    border: none;
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px); 
}

.page__right-column .org-image {
    object-fit: cover;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.description--toggle {
    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

.modal-content .card-body .header-campaign-name {
    align-items: flex-start;
}

.modal-content .card-body .header-campaign-name h5.card-title {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    text-align: left;
    padding-right: 10px;
}

.modal-content .card-body .header-campaign-name h5.bid-value {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
    color: #25C157;
    line-height: 1.5;
    white-space: nowrap;
    text-align: left;
}

.modal-content .card-body .desc-text {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 15px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.60);
    line-height: 1.6;
    text-align: left;
}

.modal-content .card-body .desc-text-heading {
    font-size: 15px;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 1.6;
    text-align: left;
    margin-bottom: 0.25rem;
}


.check-wrapper {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.check-wrapper i.fa-check-circle {
    font-size: 80px;
    color: #25C157;
}

.card-title.bid-value {
    /*font-size: 2.083vmin;!*16px; *!*/
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.card-title.bid-value {
    /*font-size: 2.083vmin;!*16px; *!*/
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.donation-success-desc,
.bid-confirmed-desc {
    /*font-size: 1.69vmin;!*13px; *!*/
    font-size: 13px;
    color: #B0B0B3;
    line-height: 1.385;
    margin-bottom: 1rem;
    text-align: left;
 }
.donation-success-desc span,
.donation-success-desc p,
.bid-confirmed-desc span,
.bid-confirmed-desc p {
    /*font-size: 1.69vmin;!*13px; *!*/
    font-size: 13px;
    color: #000000;
    line-height: 1.385;
}

.donation-success-desc {
    text-align: center;
}

.carousel--item-details .carousel-control-next,
.carousel--item-details .carousel-control-prev {
    bottom: auto !important;
    height: 20px;
    width: 20px;
    opacity: 1;
}

.carousel--item-details .carousel-control-next {
    left: auto;
    right: 15px;
    top: 20px;
}

.carousel--item-details .carousel-control-prev {
    left: auto;
    right: 125px;
    top: 20px;
}

.carousel--item-details .carousel-inner .slide-number {
    position: absolute;
    top: 21px;
    right: 34px;
    width: 90px;
    text-align: center;
    z-index: 1;
    margin: 0;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
}

.carousel--item-details .carousel-inner {
    border: 1px solid rgb(246, 246, 246);
}

.carousel--basket-raffle .custom-controls .carousel-control-next-custom,
.carousel--basket-raffle .custom-controls .carousel-control-prev-custom {
    height: 36px;
    width: 36px;
    opacity: 1;
    border-radius: 3px;
}

#campaignRightView .basketRaffleBlock--custom{
    border: 1px solid rgba(0,0,0,.125);
}
#campaignRightView .basketRaffleBlock--custom .carousel-inner{
    border: none!important;
}

#campaignRightView .custom-controls .carousel-control-prev .carousel-control-next-icon{
    background-image: none !important;
}

#basketRaffleBlock.basketRaffleBlock--custom .carousel-item img{
    border-radius: 8px;
}
#basketRaffleBlock.basketRaffleBlock--custom .carousel-item .view:after{
    background:none !important
}

.carousel--basket-raffle .carousel-control-next {
    left: auto !important;
    right: 3% !important;
    top: 43% !important;
}

.carousel--basket-raffle .carousel-control-prev {
    left: auto !important;
    right: 93% !important;
    top: 43% !important;
}

.carousel--selected-items .title {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}

.carousel--selected-items .count {
    display: flex;
    padding: var(--spacing-xxs, 2px) 10px;
    align-items: center;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #E9D7FE);
    background: var(--Component-colors-Utility-Brand-utility-brand-50, #F9F5FF);

    color: var(--Component-colors-Utility-Brand-utility-brand-700, #6941C6);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.carousel--selected-items .carousel-controls {
    display: flex;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
}
.carousel--selected-items.carousel--single-image .carousel-controls {
    display: none;
}
.carousel--selected-items .carousel-controls .control {
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
}
.carousel--selected-items .carousel-controls .control svg{
    width: 20px;
    height: 20px;
}

.carousel--selected-items .carousel-controls .control:first-child {
    border-right: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
}
.carousel--selected-items .carousel-controls .control:hover {
    background: #F1F1F1;
}

.carousel--selected-items .carousel-item img {
    width: 100%;
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
    border-radius: var(--radius-xl, 12px);
    object-fit: cover;
}
.carousel--selected-items .carousel-item .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}
.carousel--selected-items .carousel-item .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.carousel--selected-items .carousel-item .details-btn {
    cursor: pointer;
    text-align: left;
    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

#declineSuccess .card-footer,
#donationSuccess .card-footer,
#peerToPeerShare .card-footer,
#bookingConfirmedSucces .card-footer,
#ticketingGuestDataSelf .card-footer {
    margin-top: 1.5rem;
    background-color: white!important;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

#declineSuccess .app-image,
#donationSuccess .app-image {
    margin: 5px;
}

.modal-dialog .modal-header {
    background: #fff;
    color: #000;
}

.modal-dialog .modal-header button {
    cursor: pointer;
}

.campaign-list-card-goal .progress,
.goal-wrapper .progress {
    height: 4px;
}

.campaign-list-card-goal .donors-progress-value,
.goal-wrapper .donors-progress-value {
    text-align: left;
    /*font-size: min(19px, 2.343vmin);!*18px; *!;*/
    font-size: 18px;
    font-weight: 700;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: #000;
    margin-bottom: 8px;
}
.campaign-list-card-goal .donors-progress-value span,
.goal-wrapper .donors-progress-value span {
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.35);
}

.paybee-card {
    padding: 20px;
    border: 1px solid rgba(97, 97, 97, .1);
    border-radius: 8px;
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.04);
}

@media screen and (max-width: 450px){
    #cartName{
        width: 200px;
    }
}
@media screen and (min-width: 451px) and (max-width: 500px){
    #cartName{
        width: 250px;
    }
}

h6.fee-text {
    /*font-size: 1.823vmin;!*14px; *!*/
    font-weight: 400;
    font-size: 14px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: #000;
} 

h6.fee-text span {
    font-weight: 700;
    color: #000!important;
}

@media (max-width: 576px) {
    h6.label.fee-text {
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 0.21px;
        line-height: 20px;
        color: #000;
    }

    .carousel--selected-items .title {
        font-size: var(--Font-size-text-sm, 14px);
        font-weight: 400;
        line-height: var(--Line-height-text-sm, 20px);
    }
    
    .carousel--selected-items .count {
        padding: var(--spacing-xxs, 2px) 8px;
        font-size: var(--Font-size-text-xs, 12px);
        font-weight: 500;
        line-height: var(--Line-height-text-xs, 18px);
    }
    .carousel--selected-items .carousel-controls .control {
        padding: var(--spacing-md, 5px) var(--spacing-lg, 9px);
    }
    .carousel--selected-items .carousel-controls .control svg{
        width: 15px;
        height: 15px;
    }
    .carousel--selected-items .carousel-item.active,
    .carousel--selected-items .carousel-item-next,
    .carousel--selected-items .carousel-item-left,
    .carousel--selected-items .carousel-item-right {
        display: flex;
    }

    .carousel--selected-items .carousel-item img {
        margin-right: 12px;
        width: 64px;
        height: 64px;
        border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
        border-radius: var(--radius-xl, 12px);
        object-fit: cover;
    }
    .carousel--selected-items .carousel-item .name {
        -webkit-line-clamp: 1;
    
        font-size: var(--Font-size-text-sm, 14px);
        line-height: var(--Line-height-text-sm, 20px);
    }
    .carousel--selected-items .carousel-item .desc {
        -webkit-line-clamp: 3;
    
        font-size: var(--Font-size-text-xs, 12px);
        line-height: var(--Line-height-text-xs, 18px);
    }
}

hr.delimeter {
    margin: 30px 0;
    border-top: 1px solid rgba(0,0,0,0.03);
    width: 100%;
}

hr.delimeter-24 {
    margin: 24px 0;
    border-top: 1px solid rgba(0,0,0,0.03);
    width: 100%;
}

hr.delimeter--add-people {
    border-top: 1px dashed #d9d9d9;
}

.left-box {
    margin-bottom: 2rem;
    /*max-width: 510px;*/
}

/*.right-column {*/
/*    max-width: 650px;*/
/*}*/

.bank-pay-header {
    /*font-size: 1.823vmin;!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 20px;
    text-align: center;
    color: #4D4D4D;
}

.bank-pay-desc {
    /*font-size: 1.693vmin;!*13px; *!*/
    font-size: 13px;
    font-weight: 400;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 20px;
    color: #B2B0B0;
}

.activity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
 }

.activity-row .header {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-weight: 700;
}

.activity-row:not(first-child) .contributor span.username {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(17px, 2.083vmin);!*16px; *!*/
    font-size: 16px;
    font-weight: 400;
    color: rgba(0,0,0,0.65);
}

.activity-row:first-child .contributor span.username {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(17px, 2.083vmin);!*16px; *!*/
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.activity-row:first-child .contributor span.amount {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    /*font-size: min(17px, 2.083vmin);!*16px; *!*/
    font-weight: 400;
    color: #000000;
}

.activity-row:not(first-child) .contributor span.amount {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    /*font-size: min(17px, 2.083vmin);!*16px; *!*/
    font-weight: 400;
    color: #000000;
}

.activity-row .time  {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size:  min(14px, 1.69vmin);!*13px; *!*/
    font-size: 13px;
    font-weight: 400;
    color: #B0B0B3;
}

.activity-row .no-contributor .header {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    /*font-size: min(17px, 2.083vmin);!*16px; *!*/
    font-weight: 500;
    color: #000000;
}

.activity-row .no-contributor .desc {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
    color: #B0B0B3;
}

.campaign-type {
    position: absolute;
    top: 15px;
    left:0;
    height: 28px;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1;
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campaign-type .campaign-type-title {
    /*font-size: min(12px, 1.43vmin); !* 11px *!*/
    font-size: 11px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-weight: 500;
    color: #424244;
    text-transform: capitalize;
    padding-left: 10px;
    padding-right: 10px;
}
.campaign-type-wrapper .campaign-icon,
.campaign-type .campaign-icon {
    width: 22px;
    height: 18px;
    background-size: contain;
}

.campaign-type-wrapper .type-0,
.campaign-type .type-0 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}
.campaign-type-wrapper .type-1,
.campaign-type .type-1 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-2,
.campaign-type .type-2 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-3,
.campaign-type .type-3 {
    background: url("../../img/campaign-type/hindu-temple-puja.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-4,
.campaign-type .type-4 {
    background: url("../../img/campaign-type/auction.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-5,
.campaign-type .type-5 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-6,
.campaign-type .type-6 {
    background: url("../../img/campaign-type/ticketing.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-7,
.campaign-type .type-7 {
    background: url("../../img/campaign-type/long-pledge.png") center center no-repeat;
    background-size: contain;
}

.campaign-type-wrapper .type-8,
.campaign-type .type-8 {
    background: url("../../img/campaign-type/peer-to-peer.png") center center no-repeat;
    background-size: contain;
}


#eventList .campaign-type .type-0 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}
#eventList .campaign-type .type-1 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}

#eventList .campaign-type .type-2 {
    background: url("../../img/campaign-type/donation.png") center center no-repeat;
    background-size: contain;
}

.pending-items-header {
    justify-content: center;
    display: flex;
    width: 100%;
    text-align: center;
    /*font-size: min(19px, 2.343vmin);!*18px; *!;*/
    font-size: 18px;
    font-weight: 500;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    margin: 1.5rem 1rem;
}

.total {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}

.total-value {
    font-size: 16px;
    font-weight: 500;
    color: #25C157;
}

table.table thead th {
    border-bottom: none!important;
}

.payment-types {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    text-align: center;
    margin: 2rem auto;
}

.payment-types .bank {
    background: url("../../img/svg/quickpay/bank.svg") center center no-repeat;
    /*width: 54px;*/
    height: 54px;
    background-size: contain;
    margin-bottom: 10px;
}

.payment-types .card {
    background: url("../../img/svg/quickpay/card.svg") center center no-repeat;
    width: 80px;
    height: 54px;
    background-size: contain;
    margin-right: 1rem;
    margin-bottom: 10px;
}

.payment-types a {
    text-align: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*ont-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
}

.title-text {
    text-align: left;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-weight: 500;
}

.select-wrapper input {
    padding: 0 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background: rgba(0,0,0,0) url("../../img/svg/virtual-event/shevron-bottom.svg") no-repeat scroll calc(100% - 20px) center / 10px auto; */
}

.otherPayCollapseButton a {
    text-align: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
    margin-top: 4rem;
    color:rgba(0, 0, 0, 0.7);
}

.otherPayCollapseButton span {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 0.2rem;
}

.openCloseOtherIcon {
    color:rgba(0, 0, 0, 0.7);
    font-size: 1.6rem;
}

.user-party-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
}

.user-party-wrapper .party-title {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(16px, 1.953vmin);!*15px; *!*/
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.user-party-wrapper .captain-name {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(19px, 2.343vmin);!*18px; *!;*/
    font-size: 19px;
    font-weight: 700;
    color: #000;
    line-height: 1;
    padding-right: 15px;
}

.user-party-wrapper .user-count {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(25px, 3.125vmin);!*18px; *!;*/
    font-size: 30px;
    font-weight: 700;
    color: #000;
    line-height: 1;
}

.user-party-wrapper .guest-title {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: min(12px, 1.43vmin); !* 11px *!*/
    font-size: 11px;
    font-weight: 500;
    color: #000;
}

.ticket-desc {
    text-align: left;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4rem;
    color: #000;
    margin-bottom: 2rem;
    opacity: 0.70;
}

.donor-name span {
    text-align: left;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
    color: #6E42FF;
}

.history-header {
    margin-bottom: 0!important;
}

#donationsModel .dataTables_wrapper {
    padding-left: 0!important;
    padding-right: 0!important;
}

#donorTransactions_info {
    display: none!important;
}

#donationsModel .dt-buttons {
    float: right;
}

#donationTableDiv .line {
    text-align: left;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 400;
}

#donationTableDiv .line span {
    text-align: left;
    /*font-size: min(15px, 1.823vmin);!*14px; *!*/
    font-size: 14px;
    font-weight: 500;
}

#donationsModel .table .thead-light th {
    background: #F8F9FC;
    text-align: left;
    /*font-size: min(13px, 1.563vmin);!*12px; *!*/
    font-size: 12px;
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 12px;
}

#donationsModel .table tr td {
    text-align: left;
    font-size:  min(14px, 1.69vmin);/*13px; */
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 12px;
}

#donationsModel .dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: center;
}

#donationsModel .dataTables_wrapper .dataTables_paginate ul.pagination .page-item.active .page-link {
    background: #646464;
}

.user-donation-status-badge {
    display: flex;
    padding: var(--spacing-xxs, 2px) var(--spacing-md, 8px);
    align-items: center;
    border-radius: var(--radius-full, 9999px);

    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xs, 18px);
}

.user-donation-status-badge.user-donation-status-badge--success {
    border: 1px solid var(--Component-colors-Utility-Success-utility-success-200, #ABEFC6);
    background: var(--Component-colors-Utility-Success-utility-success-50, #ECFDF3);
    color: var(--Component-colors-Utility-Success-utility-success-700, #067647);
}

.user-donation-status-badge.user-donation-status-badge--warning {
    border: 1px solid var(--Component-colors-Utility-Warning-utility-warning-200, #FEDF89);
    background: var(--Component-colors-Utility-Warning-utility-warning-50, #FFFAEB);
    color: var(--Component-colors-Utility-Warning-utility-warning-700, #B54708);
}


a.option-select-link {
    font-size: 13px!important;
    font-weight: 400 !important;
    /*color: #646464;*/
    margin: 0;
    text-align: center;
    padding: 6px 8px!important;
}

.option-select-link {
    position: static!important;
    min-width: 80px!important;
    padding: 5px 8px!important;
    align-self: center;
    font-size: 13px!important;
    font-weight: 500;
    color: #4D4D4D!important;
}

a.option-select-link:hover,
a.option-select-link:active {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    /*font-size: 1.563vmin;*/
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400 !important;
    color: #6E42FF;
    margin: 0;
    padding: 3px 0 3px 10px;
}

.campaign-image-wrapper {
    border: 1px solid #F6F6F6;
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.04);
}

.otherPayCollapseButton {
    font-weight: 400;
    font-size: 13px;
    color: #6E42FF;
    /*color: #B0B0B3;*/
    text-align: center;
}

.navbar, .pagination .page-item.active .page-link {
    box-shadow: none;
}

[type="radio"]:checked + label:after {
    border: 2px solid #6941C6;
    background-color: #6941C6;
}

[type="radio"]:checked + label.add-on-donation:after {
    border: 2px solid rgb(174, 0, 105) !important;
    background-color: rgb(174, 0, 105) !important;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #f1f2f5 inset!important;
    transition: background-color 5000s ease-in-out 0s!important;
}

.category-title {
    margin: 20px 0;
    text-align: left;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (max-width: 575px) {
    .img-zoom-result {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 4;
        border: 1px solid #d4d4d4;
        width: 100%;
        height: var(--img-zoom-result);
    }

    .zoom-button-inside {
        display: none;
    }

    .zoom-button {
        display: none;
    }
}

@media (max-width: 767px) {
    .img-zoom-result {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 4;
        border: 1px solid #d4d4d4;
        width: 100%;
        height: var(--img-zoom-result);
    }

    .zoom-button-inside {
        display: none;
    }

    .zoom-button {
        display: none;
    }
}

@media (min-width: 768px) {
    .qp-header .header-info {
        line-height: 1;
        text-align: left;
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .img-zoom-result {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 4;
        border: 1px solid #d4d4d4;
        width: 100%;
        height: var(--img-zoom-result);
    }
}

@media (min-width: 992px) and (max-width: 1023px) {
    .img-zoom-result {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 4;
        border: 1px solid #d4d4d4;
        width: 100%;
        height: var(--img-zoom-result);
    }
}

@media (min-width: 1024px) {
    .img-zoom-result {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 4;
        border: 1px solid #d4d4d4;
        width: 100%;
        height: var(--img-zoom-result);
    }
}

@media (min-width: 992px) {
    .container-fluid .organization-info,
    .container-fluid .campaigns-wrapper,
    .container-fluid .campaign-list-info {
        max-width: 1320px;
        justify-content: flex-start;
        margin: 0 auto;
        /*padding: 0;*/
    }

    .quickPledgeSubItem .card-body .preset-name {
        font-weight: 500!important;
    }
}

@media (min-width: 1200px) {
    .category-title {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .container-fluid .organization-info,
    .container-fluid .campaigns-wrapper,
    .container-fluid .campaign-list-info {
        max-width: 1320px;
        justify-content: flex-start;
        margin: 0 auto;
    }
    .campaigns-wrapper {
        padding: 0 15px;
    }

    .left-box {
        padding-left: 20px;
        padding-right: 20px;
        /*max-width: 540px;*/
        max-width: 780px;
    }

    .right-column {
        padding-right: 20px;
        padding-left: 20px;
        max-width: 780px;
    }
}

#bitHistoryList th {
    border-left: none;
    border-right: none;
    color: #000000;
    font-size: 13px;
}

#bitHistoryList, #bitHistoryList td {
    border: none;
    color: #838383;
    font-size: 13px;
}

.current-bid {
    color: rgba(105, 65, 198, 1);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

/***** NEW STYLES *****/

.organization-info {
    order: 1;
    padding-top: 8px;
}

.campaign-list-info {
    order: 2;
    background-color: white;
}

.campaign__image--rounded-sm {
    border-radius: 8px;
}

.campaign__image--rounded-md {
    border-radius: 12px;
}

@media (max-width: 575px) {
    .page__left-column {
        order: 2;
    }
    .page__right-column {
        order: 1;
    }
    .campaign-section {
        display: flex;
        flex-direction: column;
    }
    .campaign__info,
    .option__info {
        order: 3;
    }
    .campaign__image {
        order: 1;
    }

    .paybee-card--rounded-lg {
        border-radius: 16px;
    }
}

@media (min-width: 576px) {
    .page__left-column {
        order: 2;
    }
    .page__right-column {
        order: 1;
    }
    .campaign-section {
        display: flex;
        flex-direction: row;
    }
    .campaign__image {
        border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .page__left-column, .page__right-column {
        padding-left: 24px;
        padding-right: 24px;
    }

    .page__right-column .campaign-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) {
    .page__left-column {
        order: 2;
    }
    .page__right-column {
        order: 1;
    }
    .campaign-section {
        display: flex;
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    .page__left-column {
        order: 1;
        max-width: 700px;
    }
    .page__right-column {
        order: 2;
    }
    .campaign-section {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    .organization-info {
        padding: 20px 30px 0;
    }
    .campaign-section {
        display: flex;
        flex-direction: column;
    }
}

.organization-url {
    color: #B0B0B3;
}

.description__wrapper ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
}

.campaign-goal__raised,
.contributor-goal__raised {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
}

.campaign-goal__raised--lg {
    color: #20A64B;
}

.campaign-goal__raised-of,
.contributor-goal__raised-of {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    line-height: 16px;
    opacity: 0.35;
}

.campaign-goal__raised-of--lg {
    color: rgb(140, 140, 140);
}

.event-date {
    color: rgb(255, 88, 150);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.card--regular {
    border: 1px solid rgba(230, 230, 230);
    box-shadow: none;
    border-radius: 8px;
}

.card--bid-section {
    background-color: rgba(249, 245, 255, 1);
    border: 1px solid rgba(214, 187, 251, 1);
    box-shadow: none;
    border-radius: 10px;
}

.card--organization {
    background-color: rgba(248, 249, 252, 1);
    border: 1px solid rgba(230, 230, 230);
    box-shadow: none;
    border-radius: 8px;
}

.card--grey {
    background-color: #f8f9fc;
}

.card--box-shadow {
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.04);
}

.card--donor-flow {
    border-radius: 16px;
    border: 1px solid #E4E7EC;
    background: #FFF;
    padding: 32px;
    
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}
.card--donor-flow .card-title {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
.card--donor-flow .card-desc {
    color: #475467;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.card-head--auction-option {
    border-bottom: 1px solid rgba(230, 230, 230, 0.5);
    padding: 10px;
    border-radius: 8px;
}

.card-head__info {
    position: absolute;
    top: 22px;
    right: 22px;
    line-height: 18px;
    z-index: 100;
}

.card-text--campaign-description,
.card-text--event-description body-1 {
    color: #000000 !important;
    opacity: 0.58;
}

.list-campaign-description {
    display: -webkit-box;
    line-clamp: 4;
    box-orient: vertical;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 112px;
}

.card-body--regular,
.card-body--auction-option {
    padding: 12px;
}

.card-body--bid-section {
    padding: 20px;
}

.card.card--regular.cursor--pointer:hover,
.card--grid.cursor--pointer:hover {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.auction-option-list-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3xl, 24px);
}
.auction-option-list-container hr {
    margin: 0;
}
.auction-option-list-container:first-child hr:first-child {
    display: none;
}
.auction-option-list-container:not(:first-child) hr:first-child {
    margin-top: 24px;
}

.grid-option-list-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px var(--spacing-2xl, 20px);
}
.grid-option-list-container:not(:first-child) {
    margin-top: 20px;
}

@media (min-width: 880px) and (max-width: 991px),
        (min-width: 1440px) {
    .grid-option-list-container {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}
@media (min-width: 1920px) {
    .grid-option-list-container.grid-option-list-container--wide {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
}

.grid-option-item {
    display: flex;
    min-height: 385px;
    flex-direction: column;
    align-items: flex-start;

    border-radius: var(--radius-2xl, 16px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
}

.grid-option-item.grid-option-item--auction {
    gap: var(--spacing-lg, 12px);
    padding: 16px 16px 16px 12px;
    min-height: 402px;
}

.grid-option-item__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--spacing-xl, 16px);
    gap: var(--spacing-md, 8px);
    align-items: flex-start;
}

.grid-option-item__footer {
    display: flex;
    height: 66px;
    width: 100%;
    padding: 8px var(--spacing-xl, 16px) 12px var(--spacing-xl, 16px);
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    border-bottom-left-radius: var(--radius-2xl, 16px);
    border-bottom-right-radius: var(--radius-2xl, 16px);
}


.card-body--campaign-option {
    border-radius: 8px;
    box-shadow: none !important;
    overflow: hidden;
    min-height: 106px;
}

.campaign-option-image {
    object-fit: cover;
    border-radius: 4px;
    height: 66px;
}
.campaign-option-image--square {
    object-fit: cover;
    border-radius: 12px;
    height: 120px;
    width: 120px;
}

.campaign-option-thumbnail {
    object-fit: cover;
    border-radius: 12px;
    height: 78px;
    width: 78px;
}

.campaign-option-image--square.cursor--pointer:hover,
.grid-option-image.cursor--pointer:hover,
.party-option-card__content-container .option-image.cursor--pointer:hover {
    box-shadow: 0 0 5px rgba(105, 65, 198, 0.6);
}

.card__image--p2p {
    border-radius: 4px;
    height: 46px;
}

.card__image--small {
    border-radius: 4px;
    height: 30px;
    width: 60px;
}

.card__available {
    color: rgb(63, 63, 64);
}

.card__sold {
    color: rgb(243, 0, 0);
    font-size: 1.25rem;
    line-height: 28px;
}
.card__sold span {
    background-color: rgba(255, 0, 0, 0.05);
}

.auction__info {
    background-color: #f2faf1;
}

@media (min-width: 576px) {
    .auction__info {
        border-radius: 8px;
    }
}

.ticketing-event-info {
    /* background-color: #D9D9D9; */
    border: 1px solid rgba(230, 230, 230);
    border-radius: 8px;
}

.event__settings,
.event__venue {
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    opacity: 0.85;
}

.sponsor-list--lg {
    background-color: white;
    border-top: 1px solid #ECEDF0;
    margin: 0 -24px;
    padding: 16px 32px;
}

.sponsor-list__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.sponsor-list__container {
    margin-left: -8px;
    margin-right: -8px;
}

.sponsor-list__container img {
    border: 1px solid rgb(246, 246, 246);
    margin-bottom: 10px;
    height: 60px;
}

@media (max-width: 575px) {
    .sponsor-list__container img {
        width: 150px;
        height: auto;
    }
}

.sponsor-list__element {
    /*height: 75px;*/
}

.sponsor-list__sponsor-name {
    text-align: center;
    font-size: 13px;
    padding-bottom: 10px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #828282;
}

.icon__wrapper {
    width: 15px;
}

.co-campaign__image {
    width: 100%;
}

@media (min-width: 576px) {
    .co-campaign__image {
        height: 80px;
        width: 160px;
    }
}

.co-campaign__title {
    color: rgb(125, 126, 128);
}

.co-campaign__name {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
}

.share__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
}

.share__title2 {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
}

.share__description {
    color: #676767;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

.progress--donor-page {
    border-radius: 0px;
}

.progress--p2p {
    border-radius: var(--radius-full, 9999px);
    background: var(--Component-colors-Utility-Brand-utility-brand-100_alt, #F4EBFF);
}

.progress--border-4 {
    border-radius: 4px;
}

.progress--small {
    height: 4px;
}

.progress--normal {
    height: 6px;
}

.progress--md {
    height: 8px;
}

.progress--medium {
    height: 20px;
    border-radius: 1rem;
}

.p2p-message-title{
    color: rgba(0,0,0,1);
    font-family: "Avenir-Medium";
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0px;
}

.p2p-message {
    color: rgba(0,0,0,1);
    font-family: "Avenir-Book";
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
}

.share-title {
    color: rgba(0,0,0,1);
    font-family: "Avenir-Medium";
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0px;
}

.p2p-share-wrapper {
    border-radius: 16px;
    border: 1px solid #D9D9D9;
    padding: 8px 16px;
}


.invitee-status-badge {
    color: #fff;
    border-radius: 16px;
}

.invitee-status-badge--green {
    background-color: #25C157;
}

.invitee-status-badge--orange {
    background-color: #FB3;
}

.invitee-status-badge--yellow {
    color: #000;
    background-color: #FFEB3B;
}

.invitee-status-badge--red {
    background-color: #F44336;
}

.progress-bar--donor-page {
    background-color: #7F56D9;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.progress-bar--small {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.progress-bar--normal {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.button--register,
.button--select {
    background-color: #FFFFFF;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    padding: 8px 24px;
}

.button--select-option {
    display: flex;
    height: fit-content;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    border: 0.5px solid var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D0D5DD);
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #7F56D9);
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
    
    color: var(--Component-colors-Components-Buttons-Primary-button-primary-fg, #FFF);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

.button--select-option:hover {
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg_hover, #6941C6);
}
.button--select-option:focus {
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05)), 0px 0px 0px 2px var(--Colors-Background-bg-primary, #FFF), 0px 0px 0px 4px var(--Colors-Effects-Focus-rings-focus-ring, #9E77ED);
}

.button--add-bid {
    background-color: rgb(0, 173, 55);
    border: 1px solid rgb(0, 173, 55);
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    padding: 6px 8px;
    min-width: 75px;
    box-shadow: none;
    text-transform: none;
}

.button--add-bid-modal {
    min-width: 164px;
    height: 46px;
    background-color: #25C157!important;
    border-radius: 8px;
    color: white;
    text-transform: none;
    box-shadow: none !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

.button--buy-it-now {
    background-color: #FFFFFF!important;
    border: 1px solid #d8d8d8!important;
    border-radius: 4px!important;
    color: #000000!important;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    padding: 6px 8px;
    text-transform: none;
    box-shadow: none;
    height: 33px;
    white-space: nowrap;
}

.button--buy-it-now-modal {
    min-width: 146px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(223, 223, 223, 1);
    text-transform: none;
    box-shadow: none !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

@media (min-width: 576px){
    .button--add-bid-modal {
        min-width: 193px;
    }

    .button--buy-it-now-modal {
        min-width: 172px;
    }
}

.button--qr-code2 {
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;

    height: 32px;
    width: 32px;
}

.button--twitter {
    background-color: rgb(29, 173, 235);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    padding: 8px 16px;
}
.button--twitter2 {
    background-color: transparent;
    border: 1px solid rgb(29, 173, 235);
    border-radius: 16px;
    color: rgb(29, 173, 235);
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;

    height: 36px;
    width: 36px;
}
.button--twitter2:hover {
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg_hover, #F9FAFB);
}

.button--facebook {
    background-color: rgb(66, 94, 172);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    padding: 8px 16px;
}
.button--facebook2 {
    background-color: transparent;
    border: 1px solid rgb(66, 94, 172);
    border-radius: 16px;
    color: rgb(66, 94, 172);
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;

    height: 36px;
    width: 36px;
}
.button--facebook2:hover {
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg_hover, #F9FAFB);
}

.button--facebook3{
    width: 10rem;
    height: 40px;
    border: none;
    background: rgb(66, 94, 172);
    color: white;
    border-radius: 6px;
}
.button--twitter3{
    width: 10rem;
    height: 40px;
    border: none;
    background: black;
    color: white;
    border-radius: 6px;
}

.button--shareOnEmail2 {
    background-color: transparent;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;

    height: 32px;
    width: 32px;
}

.button--shareOnEmail3{
    width: 10rem;
    height: 40px;
    border: none;
    background: #000;
    /* background: #419129; */
    color: white;
    border-radius: 6px;
}

.button--link3{
    width: 10rem;
    height: 40px;
    border: none;
    background: rgb(238, 238, 238);
    color: black;
    border-radius: 6px;

}
.button--link2 {
    background-color: transparent;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 16px;
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;

    height: 36px;
    width: 36px;
}
.button--link2:hover {
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg_hover, #F9FAFB);
}

@media (min-width: 576px) {
    .description-wrapper.description-wrapper--custom{
        max-height: 29vh;
        overflow-y: auto;
    }
}

.button--width-auto {
    width: auto !important;
    min-width: auto !important;
    max-width: auto !important;
}

.button--reset {
    background-color: transparent;
    border: none;
}

.button--bg-white{
    background-color: white !important;
}

 /* {
    background-color: #6941C6; 
} */

.form-check--purple [type="radio"]:checked + label:after {
    border: 2px solid #6941C6 !important;
    background-color: #6941C6 !important;
}

.form-check.form-check--period {
    margin-bottom: 30px;
    padding-left: 0px;
}

.form-check-label--period {
    display: flex !important;
    justify-content: center;

    font-size: 12px;
    line-height: 14px;

    padding-left: 0px !important;
}

.form-check-input--period[type=radio]:not(:checked)+label:after,
.form-check-input--period[type=radio]:not(:checked)+label:before {
    margin: 30px calc(50% - 7.5px) 0px calc(50% - 7.5px) !important;
}

.form-check-input--period[type=radio]:checked+label:before,
.form-check-input--period[type=radio]:checked+label:after {
    margin: 30px calc(50% - 7.5px) 0px calc(50% - 7.5px) !important;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 0px;
}

/*** UTILS ***/
@media (min-width: 1440px) {
    .flex-xxl-column {
        -ms-flex-direction: column!important;
        flex-direction: column!important;
    }

    .flex-xxl-row {
        -ms-flex-direction: row!important;
        flex-direction: row!important;
    }

    .max-w-1440-1200 {
        max-width: 1200px;
    }
    .max-w-1440-1360 {
        /* max-width: 1360px; */
        max-width: 92%;
        /* max-width: calc(100% - 520px - ); */
    }
}
@media (min-width: 1920px) {

    .col-1920-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-1920-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-1920-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .flex-1920-row {
        flex-direction: row !important;
    }
    .flex-1920-row-reverse {
        flex-direction: row-reverse !important;
    }
    .flex-1920-column {
        flex-direction: column !important;
    }
    .flex-1920-column-reverse {
        flex-direction: column-reverse !important;
    }

    .d-1920-none {
        display: none !important;
    }

    .d-1920-block {
        display: block !important;
    }

    .order-1920-1 {
        order: 1
    }
    .order-1920-2 {
        order: 2
    }
    .order-1920-3 {
        order: 3
    }
    .order-1920-4 {
        order: 4
    }
    .order-1920-5 {
        order: 5
    }

    .p-1920-0, .pt-1920-0, .py-1920-0 {
        padding-top: 0px !important;
    }
    .p-1920-0, .pb-1920-0, .py-1920-0 {
        padding-bottom: 0px !important;
    }
    .p-1920-0, .pl-1920-0, .px-1920-0 {
        padding-left: 0px !important;
    }
    .p-1920-0, .pr-1920-0, .px-1920-0 {
        padding-right: 0px !important;
    }

    .p-1920-1, .pt-1920-1, .py-1920-1 {
        padding-top: 4px !important;
    }
    .p-1920-1, .pb-1920-1, .py-1920-1 {
        padding-bottom: 4px !important;
    }
    .p-1920-1, .pl-1920-1, .px-1920-1 {
        padding-left: 4px !important;
    }
    .p-1920-1, .pr-1920-1, .px-1920-1 {
        padding-right: 4px !important;
    }

    .p-1920-2, .pt-1920-2, .py-1920-2 {
        padding-top: 8px !important;
    }
    .p-1920-2, .pb-1920-2, .py-1920-2 {
        padding-bottom: 8px !important;
    }
    .p-1920-2, .pl-1920-2, .px-1920-2 {
        padding-left: 8px !important;
    }
    .p-1920-2, .pr-1920-2, .px-1920-2 {
        padding-right: 8px !important;
    }

    .p-1920-3, .pt-1920-3, .py-1920-3 {
        padding-top: 16px !important;
    }
    .p-1920-3, .pb-1920-3, .py-1920-3 {
        padding-bottom: 16px !important;
    }
    .p-1920-3, .pl-1920-3, .px-1920-3 {
        padding-left: 16px !important;
    }
    .p-1920-3, .pr-1920-3, .px-1920-3 {
        padding-right: 16px !important;
    }

    .p-1920-4, .pt-1920-4, .py-1920-4 {
        padding-top: 24px !important;
    }
    .p-1920-4, .pb-1920-4, .py-1920-4 {
        padding-bottom: 24px !important;
    }
    .p-1920-4, .pl-1920-4, .px-1920-4 {
        padding-left: 24px !important;
    }
    .p-1920-4, .pr-1920-4, .px-1920-4 {
        padding-right: 24px !important;
    }

    .p-1920-5, .pt-1920-5, .py-1920-5 {
        padding-top: 48px !important;
    }
    .p-1920-5, .pb-1920-5, .py-1920-5 {
        padding-bottom: 48px !important;
    }
    .p-1920-5, .pl-1920-5, .px-1920-5 {
        padding-left: 48px !important;
    }
    .p-1920-5, .pr-1920-5, .px-1920-5 {
        padding-right: 48px !important;
    }

    .max-w-1920-1720 {
        max-width: 1720px;
    }
    .organization-info {
        padding-top: 68px;
    }
}

.cursor--pointer {
    cursor: pointer;
}

.avatar .fa-stack {
    height: 40px;
    width: 40px;
    line-height: 1;
    font-size: 40px;
    color: #ddd;
}

.user-seats {
    font-size: 13px;
    font-weight: 400;
    color: #25C157;
}

.user-title {
    font-size: 19px;
    font-weight: 700;
}

/* .ticket-desc {
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.58);
} */

@media (min-width: 992px) {
    .campaign-description {
        border: 1px solid rgb(217, 217, 217);
    }
}

.table-bordered.table-bordered--leader-board {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.table-bordered.table-bordered--leader-board th {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.table-bordered.table-bordered--leader-board td {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.carousel--single-image .carousel-control-prev {
    display: none !important;
}

.carousel--single-image .carousel-control-next {
    display: none !important;
}

.carousel--single-image .slide-number {
    display: none;
}

.carousel .slide-number {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-color: rgb(177, 177, 177);
    -webkit-text-stroke-width: 1px;
    font-weight: bold !important;
}

.carousel .carousel-control-prev-icon {
    background-image: url("/img/svg/left-arrow-circle.svg") !important;
}

.carousel .carousel-control-next-icon {
    background-image: url("/img/svg/right-arrow-circle.svg") !important;
}

.carousel .carousel-control-next-icon, .carousel .carousel-control-prev-icon {
    height: 40px;
    width: 40px;
}

@media (min-width: 768px) and (max-width: 880px) {
    .col-md-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .col-xl-1680-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .w-lg-auto {
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .poisiton-lg-absolute {
        position: absolute;
    }
    .w-lg-auto {
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .carousel--modal {
        margin-right: 175px;
    }
}

.carousel--sold-out {
    margin-right: 0px;
    padding-right: 0px !important;
}

.bottom-info-container {
    position: absolute;
    bottom: 20px;
    top: auto;
    left: 20px;
    right: 20px;

    display: flex;
    flex-direction: column;
}

.bottom-info-container .raffleText {
    display: flex;
    justify-content: flex-start;
}

.bottom-info-container .raffleText h3 {
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 21px;
    line-height: 25px;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(255, 255, 255);
}

.bottom-info-container .raffleText .more-button {
    min-width: 86px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid #dfdfdf;
    color: #FFF;
    margin-left: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-info-container .raffleText .more-button a {
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 0 10px;
    color: #ffffff;
}

.bottom-info-container .raffle-option-desc {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    font-family: Roboto, Helvetica Neue, sans-serif;
    line-height: 18px;
    max-height: 36px;
    overflow: hidden;
    text-align: left;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
 }

.bottom-info-container .raffle-option-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.carousel-inner .slide-number.hidden {
    display: none;
}

#basketRaffleBlock  .carousel-item .view:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0, 0.0) 0%, rgba(0,0,0, 0.0) 50%, rgba(0,0,0, 1) 100%);
}

/* new design for right panel on live page end */
@media (min-width: 768px) {
    .h3-responsive.raffle-option-name {
        font-size: 80%;
    }
}

@media (min-width: 992px) {
    .h3-responsive.raffle-option-name {
        font-size: 110%
    }
}

@media (min-width: 1200px) {
    .h3-responsive.raffle-option-name {
        font-size: 145%
    }

    #basketRaffleBlock .bottom-info-container {
        bottom: 40px;
    }

    #basketRaffleBlock .bottom-info-container .raffleText {
        padding-bottom: 10px;
    }
}

.recurring-update-desc-container {
    margin-top: 5px;
    box-shadow: none;
}

.recurring-update-desc-container .amount {
    font-size: 21px;
    line-height: 1;
    font-weight: 500 !important;
    margin: 0;
    color: #25C157;
    white-space: nowrap;
}

.bid-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.switcher {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;    
    padding: 4px;
    background: rgb(241 242 245);
    border-radius: 5px;
    height: 55px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.switcher.switcher--auction-bid {
    background: none;
    border: none;
    padding: 0px;
    height: auto;
}

.switcher-wrapper {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(208, 213, 221, 1);
    border-radius: 12px;
    padding: 3px;
    height:46px;
}

.switcher__icon > i {
    font-size: 20px;
}

.switcher .switch-button.switch-button--auction-bid {
    border-radius: none;
    overflow: none;
    width: auto;
    text-align: center;
    font-size: 14px; 
    line-height: 21px;
    letter-spacing: 1px;
    color: #000;
    position: relative;
    padding-right: 0px;
    z-index: auto;
}

.switcher .switch-button.switch-button--auction-bid:after {
    display: none;
    content: "";
}

.switch-button__label {
    padding: 10px 0px 10px 0px;
}

.switch-button__label:before {
    border: 1px solid rgba(242, 244, 247, 1);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    content: "Bid Once";
    cursor: pointer;
    padding: 10px 16px;
    text-wrap: nowrap;
}

.switch-button__label:after {
    border: 1px solid rgba(242, 244, 247, 1);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    content: "Auto Bid";
    cursor: pointer;
    padding: 10px 16px;
    text-wrap: nowrap;
}

.switch-button__checkbox + .switch-button__label:before {
    background-color: rgba(233, 215, 254, 1);
}

.switch-button__checkbox + .switch-button__label:after {
    background-color: #fff;
}

.switch-button__checkbox:checked + .switch-button__label:before {
    background-color: #fff;
}

.switch-button__checkbox:checked + .switch-button__label:after {
    background-color: rgba(233, 215, 254, 1);
}

.auto-bid-switcher {
    width: 170px;
    margin-top: 22px;
}

.switcher.checked .switch-button::after {
    font-weight: 500;
}
.switcher .switch-button-label-span {
    font-weight: 500;
}
.switcher.checked .switch-button-label-span {
    font-weight: 400;
}

.switcher .switch-button {
    border-radius: 3px;
    overflow: hidden;
    width: 170px;
    text-align: center;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    color: #000;
    position: relative;
    padding-right: 80px;
    z-index: 10;
}

.switch-button:after {
    content: "Auto Bid";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    pointer-events: auto!important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
}

.switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(80px);
    color: #fff;
}

label.switch-button-label {
    position: relative;
    padding: 0 10px;
    display: block;
    user-select: none;
    transform: translateY(0);
    margin: 0;
    left: 0!important;
    font-size: 14px;
    line-height: 45px;
}

.switch-button-checkbox + .switch-button-label:before {
    content: "";
    background: rgb(255, 255, 255);
    color: #ffffff;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.04);
    transform: translateX(0);
    /*transition: transform 300ms;*/
}

.switch-button-checkbox + .switch-button-label .switch-button-label-span {
    position: relative;
}  

.form-group .form-check-label.form-check-label--square{
    position: relative;
    display: block;
    padding-left: 24px;
}

.form-group--square.form-group .form-check-label.form-check-label--square:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 0;
    display: block;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border: 1px solid #8C8C8C;
    border-radius: 2px;
    transform: none;
}

.form-group--square.form-group .form-check-label.form-check-label--square:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: rotate(45deg);
    margin-top: 0;
    opacity: 0;
}

.form-group .form-check-input.form-check-input--square:checked + .form-check-label.form-check-label--square:before {
    background-color: #000000;
    border-color:  #000000;
}

.form-group .form-check-input.form-check-input--square:checked + .form-check-label.form-check-label--square:after {
    opacity: 1;
}

.min-bid-inc {
    color: #676767;
    align-self: center;
    font-size: 14px!important;
}

.donated-by {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.donated-by span {
    font-weight: 700;
}

.video-container {
    height: 40vmin;
    border: none;
}

.video-wrapper {
    position: relative;
    padding-bottom: 50%; /* 1:2 */
    height: 0;
}

.video-container,
.video-container-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.option-tab {
    padding: 0 0 10px 0;
}

.option-tab-nav {
    border: none;
    margin-bottom: 10px;
}

.option-tab-nav li.nav-item {
    background: rgb(241 242 245);
    padding: 5px;
}

.option-tab-nav li.nav-item .nav-link {
    color: #363636;
    font-size: 14px;
    font-weight: 400;
    border: none;
}

.option-tab-nav li.nav-item .nav-link.active {
    border: 1px solid #dee2e6;
    font-weight: 500;
    border-radius: 5px;
}

.option-tab {
    border: none;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .option-tab-nav {
        background: rgb(241 242 245);
        margin-bottom: 0;
    }
}

/*** DataTable Design - BEGIN ***/

.btn--table-action {
    background-color: #fff;
    border: 1px solid rgb(216, 216, 216);
    border-radius: 4px;
    box-shadow: none !important;
    height: 36px;
    width: 36px;
}

/*** MDB Table - END ***/

.card-text--raffle p {
    margin: 0;
}

.card-container .p2p-option-list {
    display: flex;
    padding: var(--spacing-2xl, 20px) var(--spacing-xl, 16px);
    flex-direction: column;
    justify-content: center;

    border-radius: var(--radius-2xl, 16px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.card-container .p2p-option-list .option-thumbnail {
    width: 60px;
    height: 60px;
    margin-right: 12px;
    object-fit: cover;
    border-radius: var(--radius-xl, 12px);
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
}

.card-container .p2p-option-list .option-name {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}
.card-container .p2p-option-list .p2p-option-amount {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}


.p2p-donation-option {
    border-radius: 8px;
    border: 0.2px solid lightgray;
    cursor: pointer;
}

.p2p-donation-option--donate-screen {
    background-color: white;
    border-radius: 16px !important;
}

.p2p-donation-option:hover {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.become-champ-btn {
    border-radius: 8px;
    background-color: #F3D91E;
    width: 180px;
    height: 40px;
    border: none;
    margin: auto;
}

.qr-code-img, .povered-by-img{
    width: 88px;
}

.ticket-holder-list {
    max-height: 30vh;
    word-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
}

.funding-source-list {
    max-height: 270px;
    overflow: scroll;
}

.stripe__radio-list--new-funding-source .stripe__radio--wrapper {
    padding-top: 14px;
    padding-bottom: 14px;
}

.stripe__radio-list--new-funding-source .stripe__web-element {
}

.stripe__radio {
    width: 18px;
    height: 18px;
    background-color: #FFF;
    border: 1px solid #D9D9D9; 
    border-radius: 50%;
    display: inline-block;
}

.stripe__radio.checked {
    background-color: #419129; 
    border: none;
}

.stripe__block {
    border-bottom: 1px solid rgba(228, 231, 236, 1);
}

#radioPaymentTypePR,
#radioPaymentTypeCard, 
#radioPaymentTypeBankAccount {
    width: 18px;
    height: 18px;
    background-color: #FFF;
    border: 1px solid #D9D9D9; 
    border-radius: 50%;
    display: inline-block;
}

#radioPaymentTypePR.checked,
#radioPaymentTypeCard.checked, 
#radioPaymentTypeBankAccount.checked {
    background-color: #419129; 
    border: none;
}

.payment-type-bordered {
    margin: auto -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}


.btn--multi-ticket-next {
    width: 164px;
    height: 44px;
    padding: 10px 14px !important;
    border-radius: var(--radius-md, 8px);
    border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #7F56D9) !important;
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));

    color: var(--Component-colors-Components-Buttons-Primary-button-primary-fg, #FFF);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px) !important;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
    text-transform: none;
}

.btn--back-donor-flow {
    color: #6941C6 !important;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px !important;
    box-shadow: none;
    text-align: center;
    line-height: 20px;
    border: 1px solid #7F56D9;
    border-radius: 4px;
}

.btn--donor-purple {
    background-color: #7F56D9 !important;
}

.campaign-header {
    width: fit-content;
    background-color:rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(20px) brightness(90%);
    -webkit-backdrop-filter: blur(20px) brightness(90%); /* For Safari */
    border-radius: 12px;
    padding: 12px;
}

.campaign-header.campaign-header--red {
    background-color: rgb(255, 59, 48);
}

.event-datetime {
    display: flex;
    width: fit-content;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    align-items: center;
    gap: var(--spacing-md, 8px);
    background-color: #ffffff;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}
.event-datetime .event-datetime__date {
    color: var(--colors-text-text-error-primary-600, #D92D20);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.event-datetime .event-datetime__time {
    color: var(--colors-text-text-secondary-700, #344054);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.event-address {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.event-datetime-v2 {
    color: var(--colors-text-text-secondary-700, #344054);
}
.event-datetime-v2.event-datetime-v2--grid-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 12px);
}

.event-datetime-v2 svg {
    flex-shrink: 0;
}

.sold-out-badget {
    padding: 4px 9px;
    border-radius: 12px;
    background-color: rgba(255, 59, 48, 1);
}

.modal-multi-ticket-container {
    overflow-x: auto; 
    padding-left: 54px;
}

.modal-multi-ticket-text {
    position: absolute;
    width: 54px;
    height: 47px;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 120%);
}

.modal-multi-ticket-option {
    min-width: 88px;
    height: 46px;
    color: white;
    background-color: rgb(255, 128, 0);
    border-radius: 8px;
    font-weight: 500;
    font-size: 17px;
    margin-right: 6px;
}
.modal-multi-ticket-option--selected {
    background-color: #25C157;
}

.modal-multi-ticket-option--disabled {
    pointer-events: none;
    background-color: #8C8C8C;
}

.open-donor-cart {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    border-radius: 8px;
    width: fit-content;
    padding: 5px;
    z-index: 1;
}

.multi-ticket-next-container {
    width: 100%;
    position: fixed;
    bottom: 40px;
    left: 0;
    z-index: 1031;

    display: flex;
    padding: var(--spacing-3xl, 24px);
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
    background: var(--Colors-Background-bg-secondary, #F9FAFB);
}

.multi-ticket-next-container .subtotal-text {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xs, 18px);
}

.multi-ticket-next-container .subtotal-amount {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xl, 30px);
}

.multi-ticket-next-container .items-count {
    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

@media (max-width: 575px) {
    .event-datetime {
        background-color: rgb(248, 249, 252);
    }

    .modal--small-screen {
        position: fixed;
        bottom: 0;
        margin: 0;
        width: 100%;
        height: 80vmax;

    }

    .modal.slide-in .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }
    .modal.slide-in.show .modal-dialog {
        transform: translateY(0);
    }
    
    .modal--small-screen .paybee-modal-content{
        border-radius: 16px 16px 0px 0px !important;
        height: 100%;
        min-height: 50vh;
    }
    .modal--small-screen .paybee-modal-header--small-screen{
        border-radius: 16px 16px 0px 0px !important;
    }
    
    .modal--small-screen .scrollable-content-sm {
        max-height: 85vh; 
        overflow-y: scroll; 
        padding-bottom: 70px
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .modal--tablet {
        width: calc(100% - 30px);
        max-width: 736px;
    }
}

@media (min-width: 991px) {
    .modal--tablet {
        width: calc(100% - 30px);
    }
}

.ticket-holders-list--modal {
    background: #F8F9FC;
}

@media (min-width: 576px) {
    .ticket-holders-list--modal {
        max-height: 50vh;
        overflow: scroll;
    }
}

.grey-text-1 {
    color: #F8F9FC;
}

.grey-text-2 {
    color: #D9D9D9;
}

.grey-text-3 {
    color: #8C8C8C;
}

.grey-text-4 {
    color: #676767;
}

.grey-text-5 {
    color: #3F3F40;
}

.grey-text-6 {
    color: #344054 !important;
}

.auction-images-carousel .carousel-thumbnail {
    width: 100px; 
    max-height: fit-content;
}

.carousel-thumbnail img {
    border: 1px solid rgb(246, 246, 246);
    border-radius: 8px;
}

.page-background-style {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(2px); 
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ticket-counter-block {
    /* width: 110px;
    height: 46px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC); */
    background: #FFF;
}

.ticket-counter-block .value {
    width: 34px;
    /* border-left: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    border-right: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    
    align-self: stretch; */
    background-color: #FFF;
    text-align: center;

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.ticket-counter-block .value:focus-visible {
    outline: 1px auto #9E77ED;
}

.ticket-counter-block .value::-webkit-inner-spin-button,
.ticket-counter-block .value::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.ticket-counter-block .increase, 
.ticket-counter-block .decrease {
    cursor: pointer;
    display: flex;
    width: 32px;
    height: 32px;
    padding: var(--spacing-md, 8px);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md, 8px);
    transition: background-color 0.3s ease;
}
.ticket-counter-block .increase {
    border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #7F56D9);
}
.ticket-counter-block .decrease {
    border: 1px solid var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D0D5DD);
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg, #FFF);
}

.ticket-counter-block .increase.animate,
.ticket-counter-block .decrease.animate {
    background-color: #F1F1F1;
}

.ticket-counter-block .increase.disabled svg path,
.ticket-counter-block .decrease.disabled svg path {
    stroke: #D9D9D9;
}

.ticket-counter-error {
    position: absolute;
    text-align: right;
    right: 0;
    top: 35px;
    width: max-content;
}

.rounded-sm {
    border-radius: 8px !important;
}
.rounded-md {
    border-radius: 12px !important;
}
.rounded-xl {
    border-radius: 16px !important;
}

.share-section {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #E4E7EC;
    background: linear-gradient(0deg, #FFF 0%, #F3F5F7 100%);
}
.share-section .title {
    color: #344054;
}
.share-section .subtitle {
    color: #475467;
}
.share__buttons button,
.share-section button {
    border-radius: 8px;
    border: 1px solid  #D0D5DD;
    background:  #FFF;
    box-shadow: 0px -1px 0px 0px rgba(16, 24, 40, 0.05) inset,  0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.option-item-value {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xs, 18px);
}

.auction-bid-amount {
    color: var(--Colors-Green-700, #087443);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-xs, 18px);
}

.card-container {
    border-radius: var(--radius-3xl, 20px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0px 4px 8px -2px var(--Colors-Effects-Shadows-shadow-md_01, rgba(16, 24, 40, 0.10)), 0px 2px 4px -2px var(--Colors-Effects-Shadows-shadow-md_02, rgba(16, 24, 40, 0.06));
}

.card-container .card-header {
    display: flex;
    padding: var(--spacing-3xl, 24px) var(--spacing-4xl, 32px);
    align-self: stretch;
    border-radius: var(--radius-none, 0px);
    border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-secondary, #F9FAFB);
    border-top-left-radius: var(--radius-3xl, 20px);
    border-top-right-radius: var(--radius-3xl, 20px);
}
.card-container .card-header .title {
    color: var(--colors-text-text-primary-900, #101828);
    margin-bottom: 6px;
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-display-xs, 32px);
}
.card-container .card-header .subtitle {
    display: flex;
    margin-top: 5px;

    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.card-container .card-header .subtitle p {
    margin-bottom: 0;
}
.card-container .card-header .subtitle .amount {
    text-align: right;
    white-space: nowrap;
    color: var(--colors-text-text-brand-secondary-700, #6941C6);

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}

.card-container .card-header .subtitle .items-count {
    color: var(--colors-text-text-quaternary-500, #667085);

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.card-container .card-header.card-header--p2p {
    flex-direction: column;
    gap: var(--spacing-4xl, 32px);
    background: var(--Component-colors-Utility-Brand-utility-brand-50, #F9F5FF);
}

.card-container .card-header.card-header--p2p .action-button {
    cursor: pointer;
    display: flex;
    padding: 10px 14px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Component-colors-Components-Buttons-Secondary-color-button-secondary-color-border, #D6BBFB);
    background: var(--Component-colors-Components-Buttons-Secondary-color-button-secondary-color-bg, #FFF);

    color: var(--Component-colors-Components-Buttons-Secondary-color-button-secondary-color-fg, #6941C6);
}

.card-container .card-header.card-header--p2p .fundraiser-name {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-display-xs, 32px);
}

.card-container .card-header.card-header--p2p .donor-name {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.card-container .card-header.card-header--p2p .team-badge {
    display: flex;
    padding: var(--spacing-xxs, 2px) 10px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #E9D7FE);
    background: var(--Component-colors-Utility-Brand-utility-brand-50, #F9F5FF);

    color: var(--Component-colors-Utility-Brand-utility-brand-700, #6941C6);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.card-container .card-header.card-header--p2p .info-card {
    display: flex;
    /* height: 120px; */
    padding: var(--spacing-xl, 16px) var(--spacing-2xl, 20px);
    flex-direction: column;
    gap: var(--spacing-xl, 16px);
    /* flex: 1 0 0; */

    border-radius: var(--radius-3xl, 20px);
    border: 0.5px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}
.card-container .card-header.card-header--p2p .info-card .title {
    margin-bottom: 0;
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-sm, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-display-sm, 38px);
}
.card-container .card-header.card-header--p2p .info-card .subtitle {
    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.card-container .card-header.card-header--p2p .info-card .goal {
    color: var(--colors-text-text-brand-tertiary-600, #7F56D9);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px);
}

.card-container .card-body {
    padding: var(--spacing-4xl, 32px);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.card-container .card-body.card-body--checkout-cart {
    padding: 24px var(--spacing-4xl, 32px);
}

.card-container .inputs-container {
    padding: var(--spacing-2xl, 20px);
    margin-bottom: 32px;
    border-radius: var(--radius-2xl, 16px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.card-container .option-name {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}

.card-container .list-option-name,
.card-container .grid-option-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    flex: 1 0 0;
    color: #000;
    text-overflow: ellipsis;

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-md, 24px);
}

.card-container .grid-option-image {
    width: 100%;
    border-radius: 12px;
}
.image-not-available {
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
}

.option-amount {
    color: #7F56D9;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}

.list-option-amount {
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    text-align: right;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xl, 30px);
}


.card-container .option-description {
    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.card-container .list-option-description {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.card-container .grid-option-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xs, 18px);
}

.modal-content .option-avalible-count,
.card-container .option-avalible-count {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.modal-content .option-avalible-count-v2,
.card-container .option-avalible-count-v2 {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xs, 18px);
}
.card-container .list-option-avalible-count {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xs, 18px);
}

.card-container .auction-option-avalible-count {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xs, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xs, 18px);
}

.card-container .option-details-button {
    color: #2196f3;
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
}
.card-container .option-details-button:hover {
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
}

.option-sold-out-text {
    color: var(--colors-text-text-error-primary-600, #D92D20);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}

.donor-flow-buttons-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.add-attendee-now-card {
    min-width: 280px;
    padding: var(--spacing-3xl, 24px);
    background: var(--Component-colors-Utility-Brand-utility-brand-100, #F4EBFF);
    color: var(--colors-text-text-brand-primary-900, #42307D);
}

.add-attendee-later-card {
    min-width: 280px;
    padding: var(--spacing-3xl, 24px);
    background: var(--Colors-Background-bg-tertiary, #F2F4F7);
}

.add-attendee-now-card:hover,
.add-attendee-later-card:hover {
    background: linear-gradient(0deg, var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10)) 0%, var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10)) 100%), var(--Component-colors-Utility-Brand-utility-brand-100, #F4EBFF);
}

.campaign-option-thumbnail--small {
    height: 25px;
    width: 25px;
    border-radius: 3px;
    object-fit: cover;
}

.add-on-donation-card {
    display: flex;
    align-items: center;
    cursor: pointer;
    min-height: 123px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgba(255, 0, 203, 0.04);
    border: 1px solid rgba(230, 230, 230);
    border-radius: 8px;
}
.add-on-donation-card .card-text {
    color: rgb(174, 0, 105);
}
.add-on-donation-card.selected {
    border: 1px solid rgb(174, 0, 105);
}
.add-on-donation-card:hover {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.paybee--embedded #donationFrequencyBlock_optionList {
    border-top-left-radius: var(--radius-3xl, 20px);
    border-top-right-radius: var(--radius-3xl, 20px);
}

.donation-frequency-container {
    display: flex;
    padding: var(--spacing-lg, 12px) var(--spacing-4xl, 32px);
    justify-content: space-between;
    gap: 32px;
    border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-secondary, #F9FAFB);
}
.donation-frequency-container .text{
    margin-top: 10px;
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px);
}

.donation-frequency-list {
    display: flex;
    flex-wrap: wrap;
}
.donation-frequency-list .item {
    cursor: pointer;
    display: flex;
    min-height: 40px;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
    border-left: none;
    background: var(--Colors-Background-bg-primary, #FFF);

    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.donation-frequency-list .item:first-child {
    border-top-left-radius: var(--radius-md, 8px);
    border-bottom-left-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
}
.donation-frequency-list .item:last-child {
    border-top-right-radius: var(--radius-md, 8px);
    border-bottom-right-radius: var(--radius-md, 8px);
}
.donation-frequency-list .item.selected,
.donation-frequency-list .item.selected:hover {
    background: var(--Colors-Background-bg-brand-secondary, #F4EBFF);
}
.donation-frequency-list .item:hover {
    background: var(--Colors-Background-bg-primary_hover, #F9FAFB);
}

.filter-container {
    display: flex;
    padding: 10px 14px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);

    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D0D5DD);
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg, #FFF);
}
.filter-container:hover {
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg_hover, #F9FAFB);
}
.filter-container.filter-container--no-hover:hover {
    background: none;
}

.selected-categories-list {
    display: inline-flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}
.selected-categories-list .item {
    display: flex;
    padding: var(--spacing-xxs, 2px) var(--spacing-xs, 4px) var(--spacing-xxs, 2px) 10px;
    align-items: center;
    gap: var(--spacing-xxs, 2px);
    width: fit-content;

    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200, #E4E7EC);
    background: var(--Component-colors-Utility-Gray-utility-gray-50, #F9FAFB);

    color: var(--Component-colors-Utility-Gray-utility-gray-700, #344054);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.selected-categories-list .clear-all {
    cursor: pointer;
    display: flex;
    width: fit-content;
    padding: 4px 8px;

    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.selected-categories-list .clear-all:hover {
    border-radius: var(--radius-full, 9999px);
    background: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-bg_hover, #F9F5FF);
}

.option-view-switcher {
    display: flex;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
}
.option-view-switcher .item { 
    cursor: pointer;
    display: flex;
    min-height: 40px;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md, 8px);
}
.option-view-switcher .item:first-child {
    border-right: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
    border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
} 
.option-view-switcher .item:last-child {
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}
.option-view-switcher .item:hover {
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg_hover, #F9FAFB);
}

.option-view-switcher .item.selected {
    background: var(--Colors-Background-bg-brand-secondary, #F4EBFF);
    background-clip: padding-box;
}

.auction-list-view-option-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--spacing-2xl, 20px);
}

.auction-list-view-option-container .option-info-container {
    display: flex;
    flex: 1 1 70%; 
    max-width: 70%;
    gap: var(--spacing-2xl, 20px);
}

.auction-list-view-option-container .auction-thumbnail {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-xl, 12px);
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
}

.auction-list-view-option-container .images-container {
    display: flex;
    flex: 1 1 50%; 
    max-width: 50%;
    flex-direction: column;
    gap: var(--spacing-lg, 12px);
}

.auction-list-view-option-container .images-container .images-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 6px);
}
.auction-list-view-option-container .images-container .images-list .item {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
}
.auction-list-view-option-container .images-container .images-list .count{
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

.auction-list-view-option-container .option-info {
    display: flex;
    flex: 1 1 50%; 
    max-width: 50%; 
    flex-direction: column;
    gap: var(--spacing-lg, 12px);
}
.auction-list-view-option-container .option-info .name {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}
.auction-list-view-option-container .option-info .name:hover {
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
}

.auction-list-view-option-container .option-buttons {
    display: flex;
    flex: 1 1 30%; 
    max-width: 30%; 
}

.auction-dropdown-icon {
    display: none;
    padding: var(--spacing-md, 8px);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-full, 9999px);
    border: 0px solid var(--Colors-Border-border-tertiary, #F2F4F7);
    background: var(--Component-colors-Alpha-alpha-black-50, rgba(0, 0, 0, 0.50));
    backdrop-filter: blur(2px);
}
.auction-dropdown-icon svg {
    width: 20px;
    height: 20px;
}

.auction-list-view-option-container .images-container:hover .auction-dropdown-icon {
    display: flex;
}
.auction-list-view-option-container .images-container .dropdown.show .auction-dropdown-icon {
    display: flex;
}

.donor-flow-button.donor-flow-button--auction-grid {
    width: 100%;
    max-width: 100%;
}

.donor-flow-button.donor-flow-button--auction-list {
    white-space: nowrap;
    min-width: auto;
    max-width: 200px;
    width: 100%;
    height: 40px;
}

.recent-donations-container {
    display: flex;
    flex-direction: column;
}

.recent-donations-container .vertical-line {
    width: 2px;
    border-radius: var(--spacing-xxs, 2px);
    background: var(--Colors-Border-border-secondary, #E4E7EC);
}

.recent-donations-container .message-block {
    padding: 10px var(--spacing-lg, 12px);
    margin-top: 12px;
    border-radius: var(--spacing-none, 0px) var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-md, 8px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));

    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.fundraiser-invite-container {
    padding: var(--spacing-2xl, 20px);
    margin: 32px 32px 16px;

    border-radius: var(--radius-2xl, 16px);
    border: 1px dashed var(--Gradient-Linear-Color-59, #43CBFF);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.fundraiser-invite-container .send-invites-btn {
    display: flex;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    border-radius: var(--radius-md, 8px);
    border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #7F56D9);
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));

    color: var(--Component-colors-Components-Buttons-Primary-button-primary-fg, #FFF);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}

.fundraiser-activity-container {
    padding: 32px;
}

.fundraiser-invite-container .title,
.fundraiser-activity-container .header .title {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-xl, 30px);
}
.fundraiser-invite-container .subtitle,
.fundraiser-activity-container .header .subtitle {
    color: var(--colors-text-text-tertiary-600, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.fundraiser-activity-container .header .tabs-container {
    display: flex;
    height: fit-content;
    width: fit-content;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
}
.fundraiser-activity-container .header .tabs-container .tab {
    cursor: pointer;
    display: flex;
    min-height: 40px;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px) var(--spacing-md, 8px) 14px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md, 8px);

    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}
.fundraiser-activity-container .header .tabs-container .tab:first-child {
    border-right: 1px solid var(--Colors-Border-border-primary, #D0D5DD);
    border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
} 
.fundraiser-activity-container .header .tabs-container .tab:last-child {
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}
.fundraiser-activity-container .header .tabs-container .tab.active {
    background: var(--Colors-Background-bg-active, #F9FAFB);
    background-clip: padding-box;
}

.fundraiser-activity-container .tab-content {
    padding: 0;
}
.fundraiser-activity-container .tab-content .item {
    padding: var(--spacing-xl, 16px) var(--spacing-3xl, 24px);
}
.fundraiser-activity-container .tab-content .item .name {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.fundraiser-activity-container .tab-content .item .amount {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}
.fundraiser-activity-container .tab-content .item .message {
    color: var(--colors-text-text-brand-primary-900, #42307D);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.fundraiser-activity-container .tab-content .item .actionText {
    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.fundraiser-activity-container .tab-content .item .actionText.completed {
    color: #079455;
}

.p2p-share-edit-container {
    padding: var(--spacing-4xl, 32px);
}
.p2p-share-edit-container .name {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-sm, 30px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-display-sm, 38px);
}
.p2p-share-edit-container button {
    display: flex;
    height: fit-content;
    padding: 10px 14px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md, 8px);

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
}
.p2p-share-edit-container button.button--cancel {
    border: 1px solid var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D0D5DD);
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg, #FFF);
    color: var(--Component-colors-Components-Buttons-Secondary-button-secondary-fg, #344054);
}
.p2p-share-edit-container button.button--save {
    border: 1px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
    background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #7F56D9);
    color: var(--Component-colors-Components-Buttons-Primary-button-primary-fg, #FFF);
}

.p2p-share-edit-container .controls-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl, 32px);
    flex: 1 0 0;
}

.hover-color--purple:hover {
    color: var(--colors-text-text-brand-secondary-700, #6941C6) !important;
}

.donor-cart-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;

    display: flex;
    padding: var(--spacing-3xl, 24px);
    flex-direction: column;
    gap: var(--spacing-3xl, 24px);

    border-radius: var(--radius-3xl, 20px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-secondary, #F9FAFB);
}

.donor-cart-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3xl, 24px);
}

.donor-cart-container .title {
    color: #000;
    text-align: left;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-xl, 30px);
}

.donor-cart-container .list {
    max-height: 30vh; 
    overflow-y: auto;
}
.donor-cart-container .list::-webkit-scrollbar {
    width: 7px;
}
.donor-cart-container .list::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-left: 4px solid transparent;
    background-clip: padding-box;
}

.donor-cart-container .list .cart-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xl, 16px) 0px;
    border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    transition: background-color 5s ease-in-out;
}
.donor-cart-container .list .cart-item.animate {
    background-color: var(--Component-colors-Utility-Brand-utility-brand-50_alt, #F9F5FF);
    border-radius: 8px;
}

.donor-cart-container .list .cart-item .thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
}
.donor-cart-container .list .cart-item .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;

    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.donor-cart-container .list .cart-item .amount {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-md, 24px);
}
.donor-cart-container .list .cart-item .count {
    color: var(--colors-text-text-tertiary-600, #475467);
}
.donor-cart-container .list .cart-item .delete:hover {
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
}

.donor-cart-container .subtotal {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-lg, 28px);
}

/* .donor-cart-container .hover-text,
.donor-cart-container .items-count {
    transition: opacity 0.3s ease;

    color: var(--Component-colors-Utility-Brand-utility-brand-200, #E9D7FE);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.donor-cart-container:hover .items-count {
    display: none;
}

.donor-cart-container .hover-text {
    display: none;
}
.donor-cart-container:hover .hover-text {
    display: inline-block;
} */

.initials-container {
    border-radius: var(--radius-full, 9999px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
}

.campaign-form-container .option-name {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-md, 24px);
}

.campaign-form-container .option-count {
    color: var(--colors-text-text-quaternary-500, #667085);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 300;
    line-height: var(--Line-height-text-md, 24px);
}

.campaign-form-container .option-item-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-xl, 12px);
    border: 1px solid var(--Component-colors-Utility-Purple-utility-purple-100, #EBE9FE);
    background: var(--Component-colors-Utility-Brand-utility-brand-50_alt, #F9F5FF);
}

.campaign-form-container .option-item-list .item-name {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.campaign-form-container .option-item-list .item-body {
    align-self: stretch;
    padding: var(--spacing-2xl, 20px);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.campaign-form-container .option-item-list .save-item-btn {
    display: flex;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D0D5DD);
    background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg, #FFF);
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));

    color: var(--Component-colors-Components-Buttons-Secondary-button-secondary-fg, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.campaign-form-container .option-item-list .save-item-btn:hover {
    color: var(--Component-colors-Components-Buttons-Secondary-color-button-secondary-color-fg_hover, #53389E);
    background: var(--Component-colors-Components-Buttons-Secondary-color-button-secondary-color-bg_hover, #F9F5FF);
    box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(16, 24, 40, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(16, 24, 40, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.discount-code--success {
    background-color: rgba(37, 193, 87, 0.9);
    color: #fff;
    border: 1px solid rgba(37, 193, 87, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.discount-code--error {
    background-color: rgba(255, 82, 82, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 82, 82, 0.5);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.checkout-cart-container .org-name {
    color: var(--Component-colors-Components-Buttons-Tertiary-button-tertiary-fg, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.checkout-cart-container .cart-title {
    color: var(--colors-text-text-primary-900, #101828);
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-display-xs, 32px);
}
.checkout-cart-container .cart-subtitle {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.checkout-cart-container .info-label {
    color: #000;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.checkout-cart-container .info-value {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--colors-text-text-quaternary-500, #667085);
    text-overflow: ellipsis;

    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

.checkout-cart-container .total-amount {
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-lg, 28px);
}
.checkout-cart-container .total-amount .label {
    color: var(--colors-text-text-primary-900, #101828);
}
.checkout-cart-container .total-amount .value {
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
}

.checkout-cart-container .cart-item {
    border-top: #ECEDF0 1px solid;     
    padding: 10px 0;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}
.checkout-cart-container .cart-item.cart-item--no-border {
    border-top: none;
}
.checkout-cart-container .cart-item:first-child {
    border-top: none;
}
.checkout-cart-container .cart-item .campaign-name {
    color: #000;
}
.checkout-cart-container .cart-item .item-name {
    color: var(--colors-text-text-quaternary-500, #667085);
}
.checkout-cart-container .cart-item .amount,
.checkout-cart-container .cart-item.cart-item--checkout .amount {
    display: block;
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    font-size: var(--Font-size-text-sm, 14px);
    font-weight: 500;
}

.checkout-cart-container .cart-item.cart-item--checkout {
    border-top: none;
    padding: 0;
}


.sort-and-filter-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
}

.sort-and-filter-container .sort-and-filter-text {
    color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #6941C6);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.sort-and-filter-dropdown {
    display: flex;
    width: 280px;
    max-height: 300px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */

    border-radius: var(--radius-xl, 12px);
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
}
.sort-and-filter-dropdown::-webkit-scrollbar {
    display: none;
}

.sort-and-filter-dropdown .accordion-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--Component-colors-Components-Buttons-Tertiary-button-tertiary-fg, #475467);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}
.sort-and-filter-dropdown .accordion-header::after {
    content: "";
    width: 12px;
    height: 12px;
    background: no-repeat center / contain
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none"><path d="M1.5 11L6.5 6L1.5 1" stroke="%23475467" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transition: transform 150ms ease;
}

.sort-and-filter-dropdown .accordion-header.expanded::after {
    transform: rotate(90deg);
}

.sort-and-filter-dropdown .sort-item-list {
    display: none;
    /* padding: 10px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}
.sort-and-filter-dropdown .sort-item-list.show {
    display: flex;
}

.sort-and-filter-dropdown .sort-item-list .sort-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md, 8px);
    align-self: stretch;
}

.sort-and-filter-dropdown .sort-item-list .sort-item-text {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-sm, 20px);
}

/* Party signup list option design START  */

.party-option-month-header {
    text-transform: uppercase;
    color: var(--colors-text-text-tertiary-600, #475467);
    text-align: left;
    
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.party-option-card {
    display: flex;
    min-width: 220px;
    margin-bottom: var(--spacing-3xl, 24px);;
    align-items: flex-start;
    align-self: stretch;

    border-radius: 16px;
    border: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
    background: var(--Colors-Background-bg-primary, #FFF);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.party-option-card__date-container {
    display: flex;
    width: 80px;
    min-width: 80px;
    padding: 16px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-right: 1px dashed var(--Colors-Border-border-primary, #D0D5DD);
}

.party-option-date-text {
    color: var(--colors-text-text-primary-900, #101828);
    text-align: center;
    font-family: var(--Font-family-font-family-display, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-display-xs, 32px);
}

.party-option-month-text {
    text-transform: uppercase;
    color: var(--colors-text-text-secondary-700, #344054);
    text-align: center;
    font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
}

.party-option-card__content-container {
    width: 100%;
    padding: 12px 12px 12px 16px;
}

.party-option-card__content-container .option-image {
    object-fit: cover;
    margin-RIGHT: 16px;
    border-radius: 12px;
    height: 112px;
    width: 112px;
}

/* Party signup list option design END  */

@media (max-width: 576px) {
    .card-container .card-header {
        padding: var(--spacing-xl, 16px);
    }
    .card-container .card-header .title {
        font-size: var(--Font-size-text-lg, 18px);
        line-height: var(--Line-height-text-lg, 28px);
    }

    .card-container .card-body {
        padding: var(--spacing-xl, 16px);
    }

    .card-container.card-container--borderless-sm {
        border: none;
        box-shadow: none;
    }
    .card-container.card-container--borderless-sm .card-body{
        padding: 0;
    }

    .card-container .option-name {
        color: #000;
        font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
        font-size: var(--Font-size-text-md, 16px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--Line-height-text-md, 24px);
    }
    .option-amount {
        font-size: var(--Font-size-text-md, 16px);
        font-weight: 400;
        line-height: var(--Line-height-text-md, 24px);
    }
    .card-container .option-description {
        color: var(--colors-text-text-secondary-700, #344054);
        font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
        font-size: var(--Font-size-text-sm, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Line-height-text-sm, 20px);
    }
    .modal-content .option-avalible-count,
    .card-container .option-avalible-count {
        color: var(--colors-text-text-secondary-700, #344054);
        font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
        font-size: var(--Font-size-text-xs, 12px);
        font-style: normal;
        font-weight: 500;
        line-height: var(--Line-height-text-xs, 18px);
    }

    .grid-option-list-container {
        display: block;
    }

    .grid-option-item,
    .grid-option-item.grid-option-item--auction  {
        height: auto;
        width: 100%;
        min-width: auto;
        max-width: none;
        margin-bottom: 20px;
    }

    .donor-flow-buttons-container {
        flex-direction: column;
        gap: 12px;
    }

    .donor-flow-button, 
    .donor-flow-button--outline {
        width: 100%;
        max-width: 100%;
    }

    .donor-flow-button.donor-flow-button--auction-grid {
        min-width: auto;
        max-width: none;
        width: 100%;
        padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
        white-space: nowrap;
    }
    .donor-flow-button.donor-flow-button--auction-list {
        max-width: none;
    }

    .donation-frequency-container {
        display: block;
        padding: 12px 8px;
        margin-bottom: 12px;
    }

    .selected-categories-list .item {
        padding: var(--spacing-xs, 4px) var(--spacing-sm, 6px) var(--spacing-xs, 4px) var(--spacing-lg, 12px);
        gap: var(--spacing-xxs, 2px);
        border-radius: var(--radius-full, 9999px);
        border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200, #E4E7EC);
        background: var(--Component-colors-Utility-Gray-utility-gray-50, #F9FAFB);
    }

    .auction-list-view-option-container {
        display: block;
        gap: 12px;
    }

    .auction-list-view-option-container .option-info-container {
        flex: 1 1 100%; 
        max-width: 100%; 
    }

    .auction-list-view-option-container .images-container,
    .auction-list-view-option-container .option-info,
    .auction-list-view-option-container .option-buttons {
        flex: auto;
        max-width: none;
    }

    .auction-list-view-option-container .auction-item-badge,
    .auction-list-view-option-container .video-icon {
        display: none;
    }

    .auction-dropdown-icon {
        display: flex;
        padding: 4px;
    }
    .auction-dropdown-icon svg {
        width: 17px;
        height: 17px;
    }

    .add-attendee-now-card {
        margin-bottom: 32px;
    }

    .card-container .card-header.card-header--p2p .info-card .title {
        font-size: var(--Font-size-text-xl, 20px);
    }

    .ticket-counter-block.ticket-counter-block--sm {
        flex-direction: column-reverse;
    }

    .ticket-counter-block.ticket-counter-block--sm .value {
        height: 32px;
    }

    .ticket-counter-block.ticket-counter-block--sm + .ticket-counter-error {
        top: 95px;
    }

    #mainBlock {
        background-color: #FFFFFF !important;
    }

    .fundraiser-activity-container {
        padding: 16px;
    }
    .fundraiser-activity-container .tab-content .item {
        padding: 8px;
    }

    .p2p-share-edit-container {
        padding: var(--spacing-4xl, 16px);
    }
    .p2p-share-edit-container .name {
        font-size: var(--Font-size-display-xs, 24px);
        line-height: var(--Line-height-display-xs, 32px);
    }

    .donor-flow-button.donor-flow-button--flex-sm {
        min-width: auto;
        max-width: none;
    }

    .campaign-section .campaign-info-container {
        display: flex;
        padding: var(--spacing-sm, 6px) var(--spacing-xl, 16px);
        gap: var(--spacing-lg, 12px);
        align-items: center;
        justify-content: space-between;
        align-self: stretch;
        border-bottom: 1px solid var(--Colors-Border-border-secondary, #E4E7EC);
        background: var(--Colors-Background-bg-secondary, #F9FAFB);
        backdrop-filter: blur(4px);
    }
    .campaign-section .campaign-info-container .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        
        color: var(--colors-text-text-tertiary-600, #475467);
        font-family: var(--Font-family-font-family-body, Inter, Roboto, sans-serif);
        font-size: var(--Font-size-text-sm, 14px);
        font-style: normal;
        font-weight: 500;
        line-height: var(--Line-height-text-sm, 20px);
    }
    .campaign-section .campaign-info-container img {
        height: 34px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        border-radius: var(--radius-xs, 4px);
    }

    .checkout-cart-container {
        margin-bottom: 50px;
    }

    .checkout-cart-container .checkout-btn {
        position: fixed;
        bottom: 40px;
        width: calc(100% - 30px);
    }

    .party-option-card {
        flex-direction: column;
    }
    
    .party-option-card__date-container {
        flex-direction: row;
        gap: 4px;
        width: 100%;
        border-right: none;
        border-bottom: 1px dashed var(--Colors-Border-border-primary, #D0D5DD);
        padding: 8px 16px 4px;
        justify-content: start;
    }
    .party-option-date-text {
        font-size: var(--Font-size-text-md, 16px);
        line-height: var(--Line-height-text-md, 24px);
    }
}

.font-weight-medium {
    font-weight: 500 !important;
}

@media (max-width: 991px) {
    .donor-cart-container {
        width: 100%;
        max-width: 480px;
        padding: 0;
        border: none;
        border-radius: 0;
        align-items: normal;
        align-self: stretch;
        gap: 0px;
    }

    .donor-cart-container .list {
        padding: 0px var(--spacing-xl, 16px);
        border-radius: var(--radius-2xl, 16px);
        border: 1px solid var(--Component-colors-Alpha-alpha-black-10, rgba(0, 0, 0, 0.10));
    }

    .donor-cart-expand .chevron {
        transition: transform 0.5s ease;
    }
    .donor-cart-expand.expanded .chevron {
        transform: rotate(180deg);
    }

    .text-underline--md {
        text-decoration: underline;
    }

    #quickPledge {
        margin-bottom: var(--cart-height, 0);
    }
}

/* @media (max-width: 480px) {
    .donor-cart-container {
        width: 100%;
        max-width: calc(100% - 32px);
    }
} */


#presetButtons {
    opacity: 1;
    transition: opacity 0.7s;
}
#presetButtons.animate {
    opacity: 0;
}

.modal--cropper .cropper-container {
    max-width: 100%;
}

.upload-container {
    position: relative;
    padding: 0;
    color: #000000de;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 5px;
    text-align: center;
    height: 120px;
    -webkit-user-select: none;
    user-select: none;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
.upload-container .btn {
    padding: 6px 12px;
    border-radius: 4px;
}

.chips-list {
    display: flex;
    flex-wrap: wrap;
}
.chips-item {  
    color: black;
    padding: 5px 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}