.threads_donation_container {
    max-width: 1440px;
    width: 100%;
    margin: 40px auto;
}

.threads_donation_container img {
    width: 100%;
}

.donation_banner_wrap {
    width: 100%;
    position: relative;
}

.threads_donations_banner_mark:hover .thread_banner_tooltip {
    display: block;
}

.thread_banner_tooltip {
    display: none;
    max-width: 352px;
    width: 150%;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 187.5%;
    padding: 14px;
    background: #FAFAFA;
    box-shadow: 0 2px 20px 0 #00000024;
    position: absolute;
    top: 68%;
    right: 16px;
    left: 92%;
}

.donation_content {
    margin-top: 60px;
}

.threads_donations_banner_imagupload img {
    width: 30px;
    height: 30px;
}

.threads_donation_banner {
    position: relative;
    width: 100%;
    height: auto;
}

.threads_donations_banner {
    position: absolute;
    top: 65%;
    left: 27%;
    display: flex;
    cursor: pointer;
}

.threads_donations_banner_imagupload {
    padding: 12.5px;
    display: flex;
    width: 100%;
    background: #333333;
    align-items: center;
    justify-content: center;
}

.threads_donations_banner_imagupload .threads_donations_bannerButton {
    color: #F4F4F4;
    font-weight: 500;
    font-size: 18px;
    margin-top: 5px;
    line-height: 1;
}

.threads_donations_banner_mark {
    margin-top: 14px;
}

.donation_heading {
    color: #000000;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.donation_card_wrap {
    gap: 30px 1.33%;
    width: 100%;
    column-count: 4;
}

.donation_card {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

.donation_card_img {
    width: 100%;
}

.donation_card_details {
    display: flex;
    align-items: start;
    gap: 14px;
    margin-top: 18px;
}

.donation_profile_img {
    flex: 0 0 auto;
    width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F4F4F4;
    color: #B12029;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.donation_card_user_name {
    color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
}

.dontaion_card_date {
    color: #777777;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.donation_upload_popup .popup_containers_wrap {
    max-width: 696px;
    margin: auto;
}

.donation_upload_popup .popup_containers_heading {
    text-transform: unset;
}

.donation_upload_popup .popup_containers_header {
    border: none;
    padding: 24px 40px;
}

.donation_upload_popup .popup_containers_content {
    margin: 24px 40px 40px;
    border: 1px dashed #000000;
    padding: 60px 0;
    text-align: center;
    position: relative;
}

.donation_upload_wrap,
.donation_submit_wrap {
    display: none;
}

.donation_upload_wrap.active,
.donation_submit_wrap.active {
    display: block;
}

.donation_upload_placeholder_img {
    width: 64px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.donation_popup_heading {
    color: #7D7D7D;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin: 20px 0 14px;
}

.donation_popup_sub_heading {
    color: #BBBBBB;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.donation_upload_btn,
.donation_submit_btn {
    display: block;
    width: 194px;
    height: 58px;
    margin: 40px auto 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.donation_img_upload_input {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
}

.dontaion_uploaded_img_card_wrap {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.dontaion_uploaded_img_card,
.dontaion_uploaded_img_card_upload {
    max-width: 105px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.dontaion_uploaded_img_name {
    width: 100%;
    color: #777777;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-wrap: break-word;
}

.dontaion_uploaded_img_cls_btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: #E9E9E9;
    border-radius: 50%;
    cursor: pointer;
    width: 24px;
    padding: 2px;
}

.dontaion_uploaded_img_card_upload {
    max-width: 80px;
    margin: auto 0;
    aspect-ratio: 1;
    border: 1px solid #333;
    cursor: pointer;
}

.dontaion_uploaded_img_card_upload::before {
    content: "";
    width: 50%;
    height: 1px;
    border-top: 1px solid #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dontaion_uploaded_img_card_upload::after {
    content: "";
    width: 1px;
    height: 50%;
    border-left: 1px solid #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width:1440px) {
    .threads_donation_container {
        padding: 0 16px
    }
}

@media screen and (max-width:343px) {
    .threads_donations_banner {
        top: 60%;
        left: 5%
    }

    .threads_donations_banner_imagupload {
        padding: 8px 12px;
        width: 100%;
        background: #333333
    }

    .threads_donations_banner_mark {
        width: 14px;
        height: 14px
    }

    .threads_donations_banner_imagupload img {
        width: 16px;
        height: 16px
    }
}

@media screen and (max-width:320px) {
    .threads_donations_banner {
        top: 60%;
        left: 3%
    }

    .threads_donations_banner_imagupload {
        padding: 6px 10px;
        width: 85%;
        background: #333333
    }

    .threads_donations_banner_mark {
        width: 14px;
        height: 14px
    }

    .threads_donations_banner_imagupload img {
        width: 11px;
        height: 11px
    }

    .threads_donations_banner_mark img {
        margin-top: -5px
    }

    .threads_donations_banner_imagupload .threads_donations_bannerButton {
        font-size: 10px;
        margin-top: -.4px
    }
}

@media screen and (max-width:767px) {
    .threads_donation_banner {
        width: 340px;
        height: 122px
    }

    .threads_donations_banner {
        top: 60%;
        left: 8%
    }

    .threads_donations_banner_imagupload {
        padding: 8px 12px;
        width: 100%;
        background: #333333
    }

    .threads_donations_banner_mark {
        width: 14px;
        height: 14px
    }

    .threads_donations_banner_imagupload img {
        width: 16px;
        height: 16px
    }

    .threads_donations_banner_imagupload .threads_donations_bannerButton {
        font-weight: 400;
        font-size: 12px;
        margin-top: 8px;
        line-height: 1
    }

    .popup_containers_wrap {
        margin-bottom: 0
    }

    .donation_upload_popup .popup_containers_header {
        padding: 20px
    }

    .donation_upload_placeholder_img {
        width: 40px
    }

    .donation_popup_heading {
        font-size: 16px
    }

    .donation_popup_sub_heading {
        font-size: 12px
    }

    .dontaion_uploaded_img_card_wrap {
        gap: 20px
    }

    .donation_upload_popup .popup_containers_content {
        margin: 20px 20px 20px;
        padding: 30px 16px
    }

    .donation_upload_btn,
    .donation_submit_btn {
        width: 100px;
        height: 36px;
        margin-top: 20px
    }

    .dontaion_uploaded_img_card,
    .dontaion_uploaded_img_card_upload {
        max-width: 65px
    }

    .dontaion_uploaded_img_cls_btn {
        width: 18px
    }

    .dontaion_uploaded_img_name {
        font-size: 10px
    }

    .thread_banner_tooltip {
        max-width: 238px;
        font-size: 12px;
        padding: 12px;
        top: 90%;
        right: 5px;
        transform: translateY(0%);
        left: 20%
    }

    .threads_donation_container {
        padding: 0 10px;
        margin: 10px 0 20px
    }

    .donation_content {
        margin-top: 24px
    }

    .donation_card_wrap {
        gap: 24px 2%;
        column-count: 2;
    }

    .donation_card {
        margin-bottom: 18px
    }

    .donation_card_details {
        gap: 6px;
        margin-top: 8px
    }

    .donation_profile_img {
        width: 20px;
        font-size: 9px;
    }

    .donation_card_user_name {
        font-size: 12px;
        margin-bottom: 8px
    }

    .dontaion_card_date {
        font-size: 8px
    }
}

@media screen and (max-width:360px) {
    .thread_banner_tooltip {
        left: 3%
    }
}