@import url(theme-root.css);

.tabs{
    text-decoration: none;
    color: var(--light-secondary);
}
.tabs:hover{
    color: var(--primary-text);
}
.profile-navigation-bar-list-item .active{
    color: var(--primary-text);
}
@media only screen and (max-width: 480px) {
    .tabs{
        font-size: 16px;
    }
    .profile-navigation-bar-list-item .active{
        font-size: 16px;
    }
}

/* Donation History */
.recent-donations{
    padding: 15px 30px;
}
.recent-donation-title{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.recent-donation-download{
    font-size: 14px;
    line-height: 19.6px;
    text-decoration-line: underline;
    color: var(--primary-text);
}
.recent-donation-scoll{
    padding: 30px 20px 20px 20px;
}
.recent-donations-boxes{
    height: 550px;
    min-height: 550px;
    overflow-y: scroll;
    padding: 0px 20px 0px 0px;
}
.recent-donations-boxes::-webkit-scrollbar {
    width: 6px;
}

.recent-donations-boxes::-webkit-scrollbar-thumb {
    background-color: #98A2B3;
    border-radius: 40px;
}
.recent-donations-box{
    width: 100%;
    background-color: var(--off-bg);
}
.donation-name{
    padding: 20px 20px 10px 20px;
    border-color: #F2F2F2;
}
.donation-name-title{
    font-size: 20px;
    font-weight: 500;
    line-height: 28px; 
}
.donation-name-price{
    font-size: 32px;
    font-weight: 500;
    line-height: 38.4px;
}
.donation-date-time{
    padding: 10px 20px 10px 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}
.raise-of-AUD{
    padding: 10px 20px 20px 20px;
}
.raise-of-AUD-title{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    color: var(--primary-text);
}
.raise-of-AUD-text{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #111;
}
.progress-bar{
    background: var(--Background-Grey, #E5E5E5);
    height: 8px;
    border-radius: 40px;
    margin-top: 7px;
}
.progress-fill{
    background: var(--primary-bg, #275A91);
    height: 8px;
}
.raise-of-AUD-end-date{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #111;
}
@media only screen and (max-width: 768px) {
    .donation-history .row{
        max-width: 103%;
        overflow-x: scroll;
        flex-wrap: nowrap;
    }
    .donation-history .row .col-md-4{
        width: 50% !important;
    }
    .raise-of-AUD-title{
        font-size: 17px;
        font-weight: 500;
        line-height: 24px;
    }
    .raise-of-AUD-text{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
        padding-left: 1rem !important;
    }
    .raise-of-AUD-end-date{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
    }
}
@media only screen and (max-width: 480px) {
    .recent-donations-boxes{
        height: 300px;
        min-height: 300px;
    }
    .donation-history .col-md-4{
        margin-bottom: 20px;
    }
    .recent-donations-boxes{
        padding: 0px 20px 0px 0px;
    }
    .recent-donations-box{
        margin-bottom: 1rem !important;
    }
    .recent-donation-title{
        font-size: 16px;
        font-weight: 500;
        line-height: 19.2px;
    }
    .donation-name-title{
        font-size: 16px;
        font-weight: 500;
        line-height: 19.2px;
    }
    .donation-name-price{
        font-size: 24px;
        font-weight: 500;
        line-height: 28.8px;
    }
    .donation-date-time{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
    }
    .donation-history .row{
        width: 106%;
        max-width: 106%;
        flex-wrap: wrap;
    }
    .donation-history .row .col-md-4{
        width: 100% !important;
    }
    .raise-of-AUD-title{
        font-size: 17px;
        font-weight: 500;
        line-height: 24px;
    }
    .raise-of-AUD-text{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
        padding-left: 0.8rem !important;
    }
    .raise-of-AUD-end-date{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
    }
    .raise-of-AUD{
        padding: 10px 15px 20px 15px;
    }
    .fundraiser-donation-box{
        padding: 20px 15px 10px 15px;
    }
}


/* Download Receipt */
.ausrelief-discovery-pack{
    padding: 20px 50px 20px 15px;
}
.discovery-pack-image{
    width: 125px;
    height: 125px;
    background: url(../images/product.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 8px;
}
.discovery-pack-name{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.discovery-pack-quanity{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}
.discovery-pack-price{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.download-receipt-btn{
    border: none;
    border-radius: 80px;
    padding: 17px 30px;
    background-color: var(--prominent-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--Primary-Navy);
}
.repurchase{
    display: none;
}
.download-receipt-btn:hover{
    background-color: var(--prominent-dark-bg);
    color: var(--prominent-text);
}
@media only screen and (max-width: 768px) {
    .ausrelief-discovery-pack{
        padding: 20px 15px 20px 15px;
    }
    .discovery-pack-name {
        font-size: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .ausrelief-discovery-pack{
        flex-wrap: wrap;
    }
    .discovery-pack-image{
        width: 116px;
        height: 116px;
    }
    .discovery-pack-name{
        font-size: 16px;
        font-weight: 500;
        line-height: 19.2px;
    }
    .discovery-pack-quanity{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
        padding-top: 5px;
    }
    .discovery-pack-price{
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
    .download-receipt-btn{
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        padding: 10px 12px;
        margin-top: 20px;
    }
    .repurchase{
        display: block;
    }
    .download-receipt{
        width: 100%;
        padding-left:20px;
    }
}

/* Financial Summary */
.Financial-summary-title{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px; 
}
.download-report{
    border: none;
    border-radius: 80px;
    padding: 17px 30px;
    background-color: var(--prominent-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--Primary-Navy);
}
.download-receipt-btn:hover{
    background-color: var(--prominent-dark-bg);
    color: var(--prominent-text);
}
@media only screen and (max-width: 768px) {
    .Financial-summary-title {
        font-size: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .Financial-summary-title{
        font-size: 16px;
        font-weight: 500;
        line-height: 22.4px;
        padding-left: 1rem !important;
    }
    .download-report-div{
        width: 100%;
        margin-top: 20px;
    }
    .download-report{
        padding: 17px 30px !important;
        font-size: 18px !important;
        line-height: 25.2px !important;
        width: 100% !important;
    }
}






/* Donate Page */
.donate-page-container{
    background-color: #EEF7FE !important;
}
.donate-page{
    width: 780px;
}
.donate-page-title{
    font-size: 48px;
    font-weight: 700;
    line-height: 54px;
    color: #1F4F7C;
}
.donate-page-subtitle{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1F4F7C;
    border-bottom: 1px solid #1F4F7C;
    padding-bottom: 16px;
    text-align: center;
}
.donate-page-form{
    width: 100%;
    padding: 58px 33px;
    border-radius: 12px;
    background-color: transparent;
}
.choose-donation-title{
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #1E5A96;
    margin-bottom: 20px;
}
.donation-frequency-container {
    background-color: white;
    border: 2px solid #1F4F7C;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.choose-donation-box {
    display: flex;
    gap: 160px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.choose-donation-item,
.choose-donation-item-short {
    flex: 0 1 auto;
}
.choose-donation-buttons {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1E5A96;
    padding: 14px 28px;
    border-radius: 50px;
    text-align: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    outline: none !important;
}
.choose-donation-buttons:hover {
    background-color: #f5f9fc;
    box-shadow: none;
}
.choose-donation-radio:checked + .choose-donation-buttons {
    background-color: #1E5A96; 
    color: white;
    border: 2px solid #1E5A96;
    outline: none !important;
    font-size: 16px;
    font-weight: 600;
}
.choose-donation-radio:checked + .choose-donation-buttons::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    color: #1E5A96;
    font-weight: bold;
    font-size: 14px;
    margin-right: 8px;
    order: -1;
}
.choose-donation-radio {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}
.choose-donation-amount-box {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: nowrap;
}
.choose-donation-amount-item {
    flex: 0 1 auto;
}
.choose-donation-amount-buttons {
    width: 120px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1F4F7C;
    padding: 14px 24px;
    border-radius: 12px;
    text-align: center;
    background-color: white;
    border: 2px solid #1F4F7C;
    cursor: pointer;
    transition: all 0.3s ease;
}
.choose-donation-amount-buttons:hover {
    background-color: #f5f9fc;
    box-shadow: none;
}
.choose-donation-amount-radio:checked + .choose-donation-amount-buttons {
    background-color: #1F4F7C;
    color: white;
    border-color: #1F4F7C;
}
.choose-donation-amount-radio {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}
.custom-amount-donate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}
.custom-amount-donate-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #1E5A96;
    margin: 0;
}
.custom-amount-donate-amout {
    position: relative;
    flex: 1;
    max-width: 300px;
}
.custom-amount-donate-amout .dollar-sign {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #1E5A96;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}
.custom-amount-donate-amout input{
    width: 100%;
    padding: 12px 16px 12px 40px;
    border-radius: 12px;
    border: 2px solid #1E5A96;
    background-color: white;
    font-size: 16px;
    color: #1E5A96;
    transition: all 0.3s ease;
}
.custom-amount-donate-amout input::placeholder {
    color: #98A2B3;
}
.custom-amount-donate-amout input:focus {
    outline: none;
    border-color: #1E5A96;
    background-color: #f5f9fc;
}
.custom-amount-donate-amout input::placeholder{
    color: #98A2B3;
}
.custom-amount-donate-amout input:focus-visible{
    outline: none !important;
}
.custom-select {
    position: relative;
}
.custom-select select {
    display: none;
}
.custom-select select option {
    color: #1E5A96;
}
.select-selected {
    background-color: var(--off-bg);
}
.select-selected:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #1F4F7C transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #1F4F7C transparent;
    top: 50%;
    transform: translateY(-50%);
}
.select-selected {
    color: #1E5A96;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #1F4F7C;
    cursor: pointer;
    user-select: none;
    background-color: white;
    width: 100%;
    text-align: left;
    position: relative;
}
.select-selected.default {
    color: #1E5A96;
}
.select-items div {
    color: var(--normal-text);
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    padding: 17.785px 22px 17.215px 22px;
    border-radius: 0px 0px 0px 0px;
    border-bottom: 1px solid var(--Background-Grey);
    cursor: pointer;
    user-select: none;
}
.select-items {
    position: absolute;
    background-color: var(--off-bg);
    border-radius: 0px;
    margin-top: 7px;
    border: 1px solid var(--Background-Grey);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
.donate-check-out {
    width: 100%;
    padding: 16px 32px;
    border-radius: 12px;
    border: none;
    background: #4CAF50;
    font-size: 18px;
    font-weight: 700;
    color: white;
    box-shadow: 0px 2px 8px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}
.donate-check-out:hover {
    background-color: #45a049;
    box-shadow: 0px 4px 12px rgba(76, 175, 80, 0.4);
}
.donate-check-out:disabled {
    background-color: #9ccc8a;
    cursor: not-allowed;
}
.select-hide {
    display: none;
}
.select-items div:hover, .same-as-selected {
    background-color: var(--Background-Light-Grey);
}
.gift-donation{
    padding: 17px 30px;
    border-radius: 80px;
    border: 2px solid var(--prominent-bg);
    background: var(--off-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--Primary-Navy);
    width: 220px;  
}
.donate-check-out{
    padding: 17px 30px;
    border-radius: 80px;
    border: none;
    background: var(--prominent-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--Primary-Navy);
    width: 220px;
}
.donate-check-out:hover{
    background-color: var(--primary-text);
    color: var(--prominent-text);
}
@media only screen and (max-width: 768px) {
    .donate-page-container{
        height: 100% !important;
    }
    .donate-page{
        margin: 50px 0px;
        width: 90%;
        max-width: 600px;
    }
    .donate-page-title{
        font-size: 32px;
        line-height: 40px;
    }
    .choose-donation-box {
        gap: 20px;
    }
    .choose-donation-buttons{
        width: 150px;
        padding: 12px 20px;
        font-size: 14px;
    }
    .choose-donation-radio:checked + .choose-donation-buttons {
        font-size: 14px;
        padding: 12px 16px;
    }
    .choose-donation-amount-box {
        gap: 10px;
        flex-wrap: wrap;
    }
    .choose-donation-amount-buttons {
        width: 80px;
        padding: 10px 16px;
        font-size: 14px;
    }
    .custom-amount-donate-amout {
        max-width: 100%;
        width: 100%;
    }
    .custom-amount-donate-amout input{
        width: 100%;
    }
}
@media only screen and (max-width: 600px) {
    .donate-page{
        width: 95%;
        max-width: 400px;
    }
    .donate-page-title{
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }
    .donate-page-form{
        padding: 30px 20px;
    }
    .donation-frequency-container {
        padding: 10px;
    }
    .choose-donation-box {
        gap: 10px;
    }
    .choose-donation-buttons{
        width: 120px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .choose-donation-radio:checked + .choose-donation-buttons {
        font-size: 13px;
        padding: 10px 10px;
    }
    .choose-donation-radio:checked + .choose-donation-buttons::before {
        width: 18px;
        height: 18px;
        font-size: 12px;
        margin-right: 4px;
    }
    .choose-donation-amount-buttons {
        width: 70px;
        padding: 10px 12px;
        font-size: 13px;
    }
}
@media only screen and (max-width: 480px) {
    .donate-page-container{
        height: 100% !important;
    }
    .donate-page{
        width: 330px;
    }
    .donate-page-title{
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #1E5A96;
        text-align: center;
    }
    .donate-page-subtitle{
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: #1F4F7C;
        text-align: center;
        margin-bottom: 24px !important;
        border-bottom: 1px solid #1F4F7C;
        padding-bottom: 16px;
    }
    .donate-page-form{
        padding: 24px 20px;
        border-radius: 12px;
        background-color: #EEF7FE;
    }
    .donation-frequency-container {
        background-color: white;
        border: 2px solid #1F4F7C;
        border-radius: 50px;
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }
    .choose-donation-box {
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 0;
        width: 100%;
    }
    .choose-donation-item,
    .choose-donation-item-short {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        margin: 0;
    }
    .choose-donation-title{
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        color: #1E5A96;
        margin-bottom: 12px;
        text-align: left;
    }
    .choose-donation-buttons{
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        padding: 10px 16px;
        border-radius: 50px;
        background-color: transparent;
        border: none;
        color: #1E5A96;
        outline: none !important;
        white-space: nowrap;
    }
    .choose-donation-buttons:hover {
        background-color: #f5f9fc;
    }
    .choose-donation-radio:checked + .choose-donation-buttons {
        background-color: #1E5A96;
        color: white;
        border: 2px solid #1E5A96;
        outline: none !important;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 12px;
        white-space: nowrap;
    }
    .choose-donation-radio:checked + .choose-donation-buttons::before {
        width: 16px;
        height: 16px;
        font-size: 11px;
        margin-right: 4px;
    }
    .choose-donation-amount-box {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .choose-donation-amount-item {
        flex: 0 1 auto;
        width: auto;
        margin: 0;
    }
    .choose-donation-amount-buttons {
        width: 65px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        padding: 8px 10px;
        border-radius: 50px;
        background-color: white;
        border: 2px solid #1F4F7C;
        color: #1F4F7C;
    }
    .choose-donation-amount-buttons:hover {
        background-color: #f5f9fc;
    }
    .choose-donation-amount-radio:checked + .choose-donation-amount-buttons {
        background-color: #1F4F7C;
        color: white;
        border-color: #1F4F7C;
    }
    .custom-amount-donate {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }
    .custom-amount-donate-title{
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #1E5A96;
        margin: 0;
    }
    .custom-amount-donate-amout {
        position: relative;
        width: 100%;
        max-width: 200px;
    }
    .custom-amount-donate-amout input {
        width: 100%;
        padding: 10px 14px 10px 30px;
        border-radius: 50px;
        border: 2px solid #1E5A96;
        background-color: white;
        font-size: 13px;
        color: #1E5A96;
    }
    .custom-amount-donate-amout input::placeholder {
        color: #98A2B3;
        font-size: 12px;
    }
    .custom-amount-donate-amout .dollar-sign {
        left: 14px;
        font-size: 14px;
    }
    .select-selected {
        font-size: 13px;
        padding: 10px 16px;
        border-radius: 50px;
        background-color: white;
        border: 2px solid #1F4F7C;
        color: #1E5A96;
        position: relative;
    }
    .select-selected:after {
        border-color: #1F4F7C transparent transparent transparent;
    }
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #1F4F7C transparent;
    }
    .donate-check-out {
        width: 100%;
        padding: 12px 24px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
    }
    .choose-donation{
        margin-bottom: 20px !important;
    }
    .choose-donation-amount{
        margin-bottom: 20px !important;
    }
}



/* Checkout */
.checkout-cart-boxes{
    padding: 60px 0px;
}
.checkout-cart-box{
    padding: 16px 0px;
    border-bottom: 1.5px solid var(--light-secondary);
}
.checkout-cart-image{
    width: 184px;
    height: 179px;
    border-radius: 12px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
.checkout-donation-name{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.checkout-donation-type{
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
}
.checkout-behalf{
    width: 334px;
    padding: 15px 20px;
    border: 2px solid var(--Background-Grey);
    border-radius: 12px;
    background-color: var(--off-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--light-secondary);
    margin: 12px 0px;
}
.checkout-sku{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.price-quantity{
    height: 100%;
}
.checkout-donation-price{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px; 
}
.checout-quantity{
    position: absolute;
    bottom: 0%;
    right: 0%;
}
.qty {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

    label {
        flex: 1 0 100%;
    }

    input {
        text-align: center;
        border: none;
        padding: 0px 0px 0px 15px;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        width: 64px;
    }

}
.qtyplus, .qtyminus{
    background-color: transparent;
    border: none;
}
.donation-basket{
    height: 300px;
    color: var(--off-text);
    background: url(../images/food.png), linear-gradient(-90deg, var(--Background-Light-Grey) 62.5%, #2F6095 37.5%);
    background-repeat: no-repeat;
    background-position: 25% bottom, bottom;
    background-size: auto 290px , 100%;
    border-radius: 12px;
}
.donation-basket-detail{
    position: relative;
    height: 300px;
    padding-left: 80px;
}
.donation-basket-price{
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 64px;
    font-weight: 500;
    line-height: 89.6px;
    background-color: var(--primary-text);
    color: var(--off-text);
    padding: 16px 18px;
    border-radius: 0px 12px 0px 12px;
}
.bigger-chance{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: var(--normal-text);
}
.hotmeal-donation{
    font-size: 32px;
    font-weight: 500;
    line-height: 38.4px;
    color: var(--normal-text);
    margin: 10px 0px; 
}
.hotmeal-donation-text{
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--normal-text);
    width: 512px;
}
.add-donation-basket{
    padding: 18px 30px;
    border-radius: 50px;
    border: 2px solid #2F6095;
    background: var(--off-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--primary-text);
    margin-top: 24px;
}
.add-donation-basket:hover{
    background-color: #2F6095;
    color: var(--off-text);
}
.checkout-subtotal{
    padding: 60px 0px 40px 0px;
}
.subtotal{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.checkout-personal-info{
    padding: 40px 32px;
    border-radius: 12px;
    background-color: var(--Background-Light-Grey);
}
.personal-information{
    font-size: 24px;
    font-weight: 500;
    line-height: 28.8px;
}
.personal-info-input{
    width: 100%;
    margin: 10px 0px;
    padding: 15px 20px;
    border-radius: 12px;
    border: 2px solid var(--Background-Grey);
    background-color: var(--off-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--normal-text);
}
.direct-deposit-input{
    width: 100%;
    margin: 10px 0px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 2px solid var(--Background-Grey);
    background-color: var(--off-bg);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--normal-text);
}
.personal-info-input::placeholder{
    color: var(--light-secondary);
}
.personal-info-input:focus-visible{
    outline: none;
}
.direct-deposit-input::placeholder{
    color: var(--light-secondary);
}
.direct-deposit-input:focus-visible{
    outline: none;
}
.choose-checkout-payment{
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
}
.choose-checkout-payment-radio:checked + .choose-checkout-payment-buttons {
    background-color: var(--primary-bg);
    color: white;
}
.choose-checkout-payment-radio {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}
.choose-checkout-payment-buttons {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--primary-text);
    padding: 15px 20px;
    border-radius: 12px;
    border: 2px solid var(--Background-Grey);
    text-align: center;
    background-color: var(--off-text);
    cursor: pointer;
}
.choose-checkout-payment-buttons img{
    width: 10%;
}
.choose-checkout-payment-buttons .pay{
    height: 30px;
}
.choose-checkout-payment-buttons .direct_deposit{
    width: 15%;
}
.google-pay{
    width: 7% !important;
}
.visa-card{
    padding: 10px 20px;
}
.direct-deposit{
    border-top: 1px solid #D6D6D6;
    margin-top: 20px;
    padding-top: 10px;
}
.choose-donation-amount-radio:checked + .choose-checkout-payment-buttons {
    background-color: var(--primary-bg);
    color: white;
}
.checkout-payment-method{
    padding-bottom: 24px;
}
.checkout-comment{
    height: 200px;
}
.checkout-page-btn button{
    padding: 17px 30px;
    border-radius: 80px;
    background-color: var(--prominent-bg);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    color: var(--Primary-Navy);
    border: none;
    margin-top: 40px;
}
.checkout-page-btn button:hover{
    background-color: var(--primary-text);
    color: var(--prominent-text);
}
.shipping-method{
    padding-bottom: 40px;
}
.shipping-method-details-box{
    border-radius: 12px;
    border: 2px solid var(--primary-bg);
    padding: 20px 30px;
}
.shipping-name{
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}
.shipping-time{
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: var(--light-secondary);
    padding-top: 10px;
}
.shipping-price{
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
@media only screen and (max-width: 1024px) {
    .checkout-cart-image{
        width:134px;
    }
}
@media only screen and (max-width: 768px) {
    .checkout-cart-details-tablet{
        width: 67% !important;
    }
    .price-quantity-tablet{
        width: 33% !important;
    }
    .donation-basket{
        background: url(../images/food.png), linear-gradient(-90deg, var(--Background-Light-Grey) 70.5%, #2F6095 30.5%);
        background-repeat: no-repeat;
        background-position: -9% center, bottom;
        background-size: auto 220px , 100%;
    }
    .donation-basket-detail{
        width: 100%;
        padding-left: 226px;
    }
    .donation-basket-detail-box{
        width: 400px;
    }
    .hotmeal-donation-text{
        width: 350px;
    }
    .visa-card {
        padding: 12.5px 20px;
    }
    .choose-checkout-payment-buttons img {
        width: 17%;
    }
    .google-pay {
        width: 12% !important;
    }
    .choose-checkout-payment-buttons .direct_deposit{
        width: 28%;
    }
    .checkout-cart-image{
        width:100px;
    }
}
@media only screen and (max-width: 480px) {
    .checkout-cart-boxes, .checkout-subtotal{
        padding: 40px 10px 0px 10px;
    }
    .checkout-cart-box-row{
        flex-wrap: nowrap !important;
    }
    .checkout-cart-box-row .col-md-2{
        width: 37%;
        margin-right: 8px;
    }
    .checkout-cart-box-row .col-md-10{
        width: 63%;
    }
    .checkout-cart-details-tablet{
        width: 100% !important;
        padding-left: 0px !important;
    }
    .price-quantity-tablet{
        /*width: 88% !important;*/
        /*padding: 0px 10px 0px 0px;*/
          width: 96% !important;
        padding: 0px 0px 0px 0px;
    }
    .checkout-cart-details{
        min-height:150px !important;
        width:165px;
    }
    .checkout-cart-image{
        width: 116px;
        height: 172px;
    }
    .checkout-donation-name{
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
    .checkout-donation-type{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
    }
    .checkout-sku{
        font-size: 14px;
        font-weight: 500;
        line-height: 16.8px;
        padding-top: 10px;
    }
    .checkout-behalf{
        display: block !important;
        width: 183px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
    }
    .checkout-donation-price{
        font-size: 20px !important;
        font-weight: 500;
        line-height: 24px;
    }
    .behalf-sku{
        display: flex;
        flex-direction: column-reverse;
    }
    .qty {
        label {
            flex: 1 0 100%;
        }
        input {
            padding: 0px 0px 0px 0px;
            width: 30px;
        }
    }
    .delete-icon{
        position: absolute;
        /*top: -180px;*/
        top: -155px;
        right: 2%;
    }
    .donation-basket{
        height: 488px;
        background: url(../images/food.png), linear-gradient(0deg, var(--Background-Light-Grey) 60.5%, #2F6095 40.5%);
        background-repeat: no-repeat;
        background-position: center 46px, bottom;
        background-size: auto 220px , 100%;
        margin: 40px 10px 20px 10px;
    }
    .donation-basket-detail{
        padding-left: 0px !important;
        height: 0px;
        align-items: start !important;
    }
    .donation-basket-price{
        background-color: transparent;
        font-size: 48px;
        font-weight: 500;
        line-height: 67.2px;
        top: -55px;
    }
    .donation-basket-detail-box{
        width: 100%;
        padding: 230px 20px 0px 20px;
    }
    .basket-logo-col{
        display: block !important;
    }
    .basket-logo-col .w-w-w-logo{
        margin-top: 10px;
        width: 98.71px;
        height: 36px;
    }
    .hotmeal-donation-text{
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        line-height: 16.8px;
    }
    .bigger-chance{
        font-size: 12px;
        font-weight: 500;
        line-height: 14.4px;
    }
    .hotmeal-donation{
        font-size: 24px;
        font-weight: 500;
        line-height: 28.8px;
    }
    .add-donation-basket{
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
    }
    .checkout-personal-info, .checkout-personal-info, .checkout-personal-info{
        padding: 30px 19px 32px 20px;
    }
    .checkout-page-btn{
        padding: 0px 19px 0px 20px;
    }
    .checkout-payment-method{
        padding: 12px 10px;
    }
    .checkout-comment-box{
        padding: 0px 10px;
    }
    .personal-info-input{
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
    }
    .subtotal{
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
    .checkout-donation-price{
        font-size: 24px;
        font-weight: 500;
        line-height: 28.8px;
    }
    .choose-checkout-payment-buttons img {
        width: 52%;
    }
    .google-pay {
        width: 29% !important;
    }
    .choose-checkout-payment-buttons .direct_deposit {
        width: 68%;
    }
    .choose-checkout-payment-buttons{
        padding: 13px 20px;
    }
    .visa-card {
        padding: 5px 20px;
    }
    .direct-deposit-input{
        padding: 15px 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
    }
    .shipping-method{
        padding: 20px 10px;
    }
}