.fundraiserTotals {
    background-color: white;
    border-radius: 8px;
    border: 1px solid rgba(217, 224, 250, 0.87);
    box-shadow: 0px 4px 4px 0px rgba(174, 216, 235, 0.8);
    width: 100%;
}

.fundraiserTotals .totalsHeader {
    font-family: "Metropolis Bold";
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.3px;
    color: #fff;
    background-color: #4e47ea;
    padding: 5px 0px;
    text-align: center;
    border-bottom: 1px solid #333;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.fundraiserTotals .totalsRow {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid lightgrey;
    padding: 5px 10px;
}

.fundraiserTotals .totalsRow:last-child {
    border-bottom: none;
}

.fundraiserTotals .totalsLabel {
    font-family: "Metropolis Bold";
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: #4e47ea;
}

.fundraiserTotals .totalsValue {
    font-family: "Metropolis Bold";
    font-size: 16px;
    color: #4b4a4a;
}

.fundraiserTotals .totalsHeader {
    background-color: #4e47ea;
}
/* mobile */
@media (max-width: 1024px) {
    .fundraiserTotals {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0px;
        margin-bottom: 20px;
        padding-inline: 10px;
        background-color: transparent;
        border-radius: 0;
        border: none;
        width: 100%;
        margin-right: 0px;
        gap: 0;
        position: relative;
        box-shadow: none;
    }

    .fundraiserTotals .totalsHeader {
        font-family: "Metropolis Bold";
        font-size: 17px;
        line-height: 20px;
        letter-spacing: 0.17px;
        color: #4e47ea;
        background-color: transparent;
        border-bottom: none;
        position: absolute;
        bottom: 25px;
        left: 15px;
        background-color: transparent;
    }

    .fundraiserTotals .totalsRow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: none;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #4e47ea;
        background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/top_circle.png);
        background-size: 30vw;
        background-repeat: no-repeat;
    }
    .fundraiserTotals .totalsRow:last-child {
        border-bottom: 1px solid #4e47ea;
    }

    .fundraiserTotals .totalsLabel {
        font-family: "Metropolis Bold";
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.2px;
        /* color: white; */
    }

    .fundraiserTotals .totalsValue {
        font-family: "Metropolis Semi Bold";
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.2px;
        /* color: white; */
    }
}

/* iPad */
/* @media (min-width: 768px) and (max-width: 1025px) {
    .fundraiserTotals {
        display: flex;
        align-items: center;
        margin-top: 10px;
        background-color: transparent;
        border-radius: none;
        border: none;
        width: 100%;
        margin-right: 0px;
        gap: 40px;
    }

    .fundraiserTotals .totalsHeader {
        font-family: "Metropolis Bold";
        font-size: 20px;
        line-height: 32px;
        letter-spacing: 0.3px;
        color: #0d4962;
        background-color: transparent;
        border-bottom: none;
    }

    .fundraiserTotals .totalsRow {
        display: flex;
        border-bottom: none;
    }

    .fundraiserTotals .totalsLabel {
        font-family: "Metropolis Bold";
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0.18px;
        color: #0d4962;
        margin-right: 5px;
    }

    .fundraiserTotals .totalsValue {
        font-family: "Metropolis Regular";
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0.18px;
        color: #4b4a4a;
    }
} */

/* DARK MODE */
.dark .fundraiserTotals .totalsHeader,
.dark .fundraiserTotals .totalsValue,
.dark .fundraiserTotals .totalsLabel,
.dark .popupmessage .modalContainer .title {
    color: rgba(255, 255, 255, 0.87);
}
.dark .fundraiserTotals .totalsRow,
.dark .fundraiserTotals .totalsHeader {
    border-bottom-color: rgba(255, 255, 255, 0.87);
}
.dark .fundraiserTotals .totalsTable {
    border-color: rgba(255, 255, 255, 0.87);
}