/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

h1 {
    font-size: 2.25em;
    color: #4b629c;
}

.US-Dollar-Warning {
    color: #4b629c;
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

.DonationContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: solid;
    border-color: #4b629c;
    background-color: #c3fae8;
    margin-left: 33%;
    margin-right: 33%;
    padding-bottom: 0.0625em;
}


.Donation-Page-Title {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

.Donation-Data {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    width: 100%;
    background-color: #FFFFFF;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 25% 50% 25%;
}

.Donate-Image-And-Text {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}






.Donation-Type {
    list-style-type: none;
    color: #4b629c;
    display: grid;
    grid-templat-columns: repeat(2 1fr);
}



    .Donation-Type label,
    .Donation-Type input {
        background: #D2CCDB;
        color: #4b629c;
    }

        .Donation-Type input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
        }

            .Donation-Type input[type="radio"]:checked + label,
            .Checked + label {
                background: #4b629c;
                color: #FFFFFF;
            }

    .Donation-Type label {
        border: 0.0625em solid #CCC;
        cursor: pointer;
        z-index: 90;
    }

        .Donation-Type label:hover {
            background: #DDD;
        }

.Donation-Type-Error {
    color: red;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    margin-left: 0.5em;
    margin-top: 0.5em;
}

    .Donation-Type-Error span {
        color: red;
    }

.One-Time {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

    .One-Time label {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

.Monthly {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

    .Monthly label {
        display: inline-block;
        width: 100%;
        text-align: center;
    }



.Donation-Amount {
    list-style-type: none;
    color: #4b629c;
    display: grid;
    grid-templat-columns: repeat(2 1fr);
    margin-left: 5%;
}


    .Donation-Amount label,
    .Donation-Amount input {
        background: #D2CCDB;
        color: #4b629c;
    }

        .Donation-Amount input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
        }

            .Donation-Amount input[type="radio"]:checked + label,
            .Checked + label {
                background: #4b629c;
                color: #FFFFFF;
            }

    .Donation-Amount label {
        border: 0.0625em solid #CCC;
        cursor: pointer;
        z-index: 90;
    }

        .Donation-Amount label:hover {
            background: #DDD;
        }


.Donation-Amount-Error {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    margin-top: 0em;
}

.Donation-Amount-Error span {
    color: red;
}

.a25 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

    .a25 label {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

.a50 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

    .a50 label {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

.a75 {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}

    .a75 label {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

.a100 {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

    .a100 label {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

.aOther {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
}

    .aOther label {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

.aOtherAmount {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
}

    .aOtherAmount input {
        display: inline-block;
        width: 90%;
        margin-top: 0.75em;
        text-align: center;
        color: #4b629c;
    }

.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 65%;
        pointer-events: none;
        width: 1.5625em;
        text-align: center;
        font-style: normal;
        color: #4b629c;
    }

    .input-icon > input {
        padding-left: 1.5625em;
        padding-right: 0;
    }

.input-icon-right > i {
    right: 0;
}

.input-icon-right > input {
    padding-left: 0;
    padding-right: 1.5625em;
    text-align: right;
}



.Donation-Button {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
    margin-right: 10%;
    margin-top: 0.5em;
    justify-self: right;
}

    .Donation-Button button {
        color: #4b629c;
    }




.Donate-Image {
}

    .Donate-Image img {
        width: 95%;
    }

.Donate-Text {
    width: 95%;
    padding: 5%;
}