@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --red: #018464;
    --font-color: #344556;
    --font-color-70: #344556b3;
    --font-color-50: #34455675;
    --font-color-10: #34455626;
    --font-size-p: 1rem;
    --font: "Roboto", sans-serif
}

body {
    font-family: var(--font);
    color: var(--font-color)
}

h2,
h3,
h4 {
    font-weight: 300
}

h1 {
    font-size: 2rem;
    margin: 0;
    padding: 0
}

h2 {
    font-size: 1.3rem;
    background-color: #fff;
    padding: 0;
    width: auto
}

h3 {
    font-size: 1rem;
    padding: 0;
    margin: 0
}

.row:after {
    content: "";
    display: table;
    clear: both
}

.form-body fieldset {
    margin-bottom: 1rem;
    border: none
}

.form-container {
    max-width: var(--maxWidth);
    width: 100%;
    padding: 50px
}

.form-body h1 {
    color: var(--red)
}

.donation-amount,
.my-data,
.my-donation,
.payment-method {
    width: 100%;
    border: 1px solid var(--red);
    padding: 50px 30px;
    border-radius: 30px;
    margin-top: 50px;
    position: relative
}

.donation-amount h2,
.my-data h2,
.my-donation h2,
.payment-method h2 {
    position: absolute;
    top: -15px;
    left: 35px;
    padding: 0 15px
}

.donation-amount h2:before {
    content: "";
    display: block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABRElEQVRIieWUwa2DMAyGPQIjMEIUw70j9EjMJSN0g47ACB0lJ3BujMAIjMA7ENP0ldIguNVSJALR/xnntwF+IpyymS/qxiP1jDT4om5Y052RBtkfAgSxaWsdgoRMpw7NlYvq4pF6j9S3JSkuqgsjTR5pPAxoS1IAc8lYVTkAwCkAX9SNiAgEAIBVlQv8+D2gcQJhVeVO2WwRR+qdstkhAABAcNHESIM8nyYOEOz6hJwr/g4xTi46KdqSVJzdi8eRRl/UzZqgUzYLffJgTffYBC8hl7jZTP9dNPfE+H7WuBXA/PFTWRjpEfu90+b2FDcu3nukfhcgOrPYMh4RMqvW/nIT8K1crMnK38i7Ds31U3bJAJlDAACsyS6lCsBkwLcIzhuTRsUegFM2C0MufQ7J4f3LuKRujjNKWR6p77S5nT4qfi/+AGMQqPwrsSxeAAAAAElFTkSuQmCC") no-repeat;
    width: 25px;
    height: 30px;
    float: left;
    margin: 0 6px 0 0;
}

.payment-method h2:before {
    content: "";
    display: block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABrElEQVRIid1Vy5WEIBDcEAxhQuDReDcEj9BeCMEMDMEQDGFC4CTNzRAMYUJwD8IsIsw4e9vt97jw6Wqqiubr698HCdk40Y0OcHGADz8WApwsqPbXiecamQO8E+D2ajjAhZi8fVY1R+0AHyGBE91oQbVzjYyYvFlQLXEcCHANQJar/lJyy1UfVTgZpqtX+53oxssgxOQtVJ7jN2hwOidkE0DmGlkZAJQhwM2Jbozn5xpZXCkBTinv0fqaTW5BtWFDTIvlqg+3SsQ93yRowlFnqscpV310aJhrZJ6OfU7I5rB3F35zgPcTgPf2ifuSJjnxAwu52/1UWuY2jNUB3nOOMUxXRYAnz5lHs1t3N0AyphwAAW45gKUoUJKkREVk17OTgsjEcUjm1/gRGaar8BhTgGj+LHJs0wMAR13sRVExOz07jcUmGGhKrXrWQJn0xUYWXYrthZi8PZMkHvd0ZQW0oNrQRnLnjpujZpfeJA3DdOX/ikdOv2sggAtxHEjIxjBdGaYrErLxLWQJYluu+ned9xD+w1mufDgvO+i78C6agl09HSuBMsRRf1T1n4xvm2LaY08eo7IAAAAASUVORK5CYII=") no-repeat;
    width: 25px;
    height: 50px;
    float: left;
    margin: 0 6px 0 0;
}

.my-donation h2:before {
    content: "";
    display: block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABbUlEQVRIieVVu5GEMAx1CZRACRoL8i1hQxCJS9gOtgRKoARKcARyRgmUQAlcAGaNFxvuboObOc04svyk9/SxEP/CNKiEJT0N0mCQBpNVtQaVfAzcIA2MNHtn/HEQDSoxWVWvGU+MNBukocsJOCtujKV2A5msqhmK9FcZdzmB6+PfG6TpUhBGanYZQ5GyJOX79bJ8HDBqrgQYGWnmrLhdoiyEYChSyyLquMozMdJ8WVOxlyxY+DftD2TZATr3LEmddhdLerran7Bs/SS6nCBai5j2LElpUIkLbpAGX0Yr1WEttgDeI0t/nYkg+IvFItNbAJNV9dFjvzYh8DX7JiiRD9RjeffvQuA9lvet+5DGYAfG2lSDSkIPd5N91t6hWsTMan86aEK8asFYaoYitava97MSLqtiWy/taYCdTO5xGNnV4C+72PzsbAVoNrkcRl1O4LTrtCRT6svgAUaHH8536nQeZPmApvW0HwP/8/YF1ruhLwHEqUcAAAAASUVORK5CYII=") no-repeat;
    width: 25px;
    height: 30px;
    float: left;
    margin: 0 6px 0 0;
}

.my-data h2:before {
    content: "";
    display: block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABMUlEQVRIieVUwY2EMAxMCZRACVYc/pTAMzaflEAHWwIlXAmUkBdxfpRACZTAfcjuHWIPDvakk3akvCzPWPF4lHoLiLFlRO4i8iDIY0Tu+oLhJeRBUxORJ0Ge1y9oai6R9wVDRJ4i8hQ0NX3BIGDzoKm5CxlbnhaIyJ0gz6L5tq4lkYjcnRYQ5FGQZwGbr2seXLYITP9a4OPZMh97IH9ewNhy7RgPLhPNLjkrIFWnBZRSSjTftiwqyHM0dXuJPKEvGATJJ8sKkr88+Z/Dg8uWK04Rsf6iMSJ3WzeyiyV7tki3d4E8HL7ohXxKFgxI1VawCdg8IFXfBtkT8eCy1BBN3Xpw2ZGhoqnbQ0f3JV+Go+QJguSf5dZjkiXczlgwIFW74fdT9uzhUDalZf2W/FX9b4pPg/MZUo3Gyw0AAAAASUVORK5CYII=") no-repeat;
    width: 25px;
    height: 30px;
    float: left;
    margin: 0 6px 0 0;
}

.donation-amount h2 {
    width: auto;
}

.payment-method h2 {
    width: auto;
}

span#my-payment-method,
span.amount,
span.currency {
    float: right;
    padding-right: 10px
}

i {
    margin-right: 1rem;
    color: var(--red)
}

.display-flex-row {
    display: flex;
    padding-bottom: 10px;
    justify-content: space-between
}

.display-flex-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 15px
}
.row {
    display: flex;
    align-content: space-evenly
}
.payment-method label.pickBox {
    width: 100%;
    height: 100px;
    font-size: var(--font-size-p)
}

.desired-amount:focus,
.desired-amount:focus-visible,
.desired-amount:focus-within {
    outline: 0
}

label.pickBox {
    width: 24.5%;
    height: 86px;
    border-radius: .25rem;
    font-size: 1.5em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    display: flex;
    justify-content: center;
    line-height: 5rem
}

.desired-amount.pickBox {
    width: 100%;
    display: flex;
    flex-direction: row
}

.desired-amount-input {
    outline: 0;
    border: none;
    font-size: 1.5rem;
    text-align: right;
    font-weight: 300;
    font-family: var(--font);
    color: var(--red)
}

.my-desired-amount label.desired-amount:before {
    content: "€";
    position: absolute;
    right: 12%;
    top: 53%
}

label.desired-amount.pickBox {
    padding: 30px 22px;
    font-size: 1.5rem;
    justify-items: center;
    align-items: center
}

input.desired-amount-input:focus,
input.desired-amount-input:target {
    border: 1px solid #fff
}

label.pickBox:hover {
    color: var(--red)
}

input.hidden:checked + label.pickBox {
    border-color: var(--red);
    color: var(--red);
    border-width: 3px
}

.payment-method img {
    width: 55px;
    height: 55px;
    margin: 0 40px;
}

.payment-method .pickBox {
    align-items: center;
    justify-content: inherit;
    border: 1px solid var(--font-color-50);
}

.inactive {
    border: 1px solid var(--font-color-50);
    color: var(--font-color-70)
}

.active {
    border: 2px solid var(--red);
    color: var(--red)
}

::placeholder {
    color: var(--font-color-70)
}

.group {
    font-size: var(--font-size-p);
    position: relative;
    display: block;
    color: var(--font-color);
    padding: 25px 0 10px 0
}

.group .group-label {
    position: absolute;
    display: block;
    top: 17px;
    left: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
    pointer-events: none;
    cursor: text;
    color: var(--font-color);
    background-color: #fff;
    padding: 0 5px;
    font-size: 13px
}

.group input, .group select {
    width: 630px;
    padding: 10px 0 10px 15px;
    display: block;
    font-size: var(--font-size-p);
    color: var(--font-color);
    outline: 0;
    border: 1px solid var(--font-color-50);
    border-radius: 3px;
    font-family: var(--font)
}

.group input:focus, .group select:focus {
    outline: 0
}

.group input:focus ~ .group-label, .group select:focus  ~ .group-label{
    color: var(--font-color-70)
}
.donation-button {
    width: 90%;
    display: flex;
    justify-content: center
}

.donation-button button {
    font-size: var(--font-size-p);
    background-color: #fff;
    border: 1px solid var(--red);
    padding: 20px;
    color: var(--red);
    border-radius: 3px;
    width: 300px;
    margin: 70px
}

input.hidden {
    position: absolute !important;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    visibility: hidden
}

.my-donation {
    display: block
}

.my-donation span {
    color: var(--red)
}

.summary {
    width: 40%
}

.regular-checkbox {
    appearance: none;
    border: 1px solid var(--font-color-50);
    padding: 9px;
    top: 4px;
    border-radius: 3px;
    display: inline-block;
    position: relative
}

.regular-checkbox:active,
.regular-checkbox:checked:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1)
}

.regular-checkbox:checked {
    background-color: #fff;
    border: 1px solid #fff
}

.regular-checkbox:checked:after {
    content: '\2713';
    font-size: 21px;
    position: absolute;
    top: -5px;
    left: 0;
    color: var(--red)
}

.hide {
    display: none
}

.donation-button button:hover {
    background-color: var(--red);
    color: #fff
}

.thanks {
    max-width: var(--maxWidth);
    width: 100%;
    display: flex;
    justify-content: center;
}

.success-donation {
    width: 30%;
    height: 30%;
    border: 1px solid white;
    padding: 50px;
    border-radius: 30px;
    margin-top: 20%;
    position: relative;
    color: white;
    font-size: 1.5rem;
}

.success-donation h1 {
    position: absolute;
    top: -15px;
    left: 35px;
    padding: 0 15px;
    color: white;
    background-color: var(--red);
    display: flex;
}

.success-donation i {
    color: white;
}


/*-----------media----------------------
------------queries--------------------*/


@media (min-width: 320px) and (max-width: 575px) {
    .form-container {
        padding: 20px
    }

    h1 {
        font-size: 1.4rem
    }

    .donation-amount,
    .my-data,
    .my-donation,
    .payment-method {
        padding: 55px 20px
    }

    .display-flex-row {
        display: grid;
        grid-template-columns: 48% 48%;
        column-gap: 14px;
        row-gap: 10px
    }

    .display-flex-grid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 5px
    }

    label.pickBox {
        width: 100%;
        margin: 0
    }

    .payment-method label.pickBox {
        width: 100%;
        height: 77px;
        line-height: 1;
        margin: 5px 0
    }

    .payment-method img {
        width: 35%;
        height: 55%;
        margin: 0
    }

    .donation-amount h2,
    .my-data h2,
    .my-donation h2,
    .payment-method h2 {
        left: 19px;
        padding: 0 7px;
        font-size: 1.1rem;
    }

    .donation-amount h2 {
        width: 64%;

    }

    .payment-method h2 {
        width: 77%;
    }

    .my-desired-amount {
        display: flex;
        flex-direction: column
    }

    .desired-amount-input {
        text-align: right;
        width: 55%;
        font-size: 1rem;
        padding-right: 25px;
    }

    label.desired-amount.pickBox {
        padding: 30px 22px;
        font-size: .9rem;
        line-height: 1;
        justify-items: center;
        align-items: center
    }

    .my-desired-amount label.desired-amount::before {
        right: 13%;
        top: 72.3%;
        font-size: 1.2rem
    }

    .summary {
        width: 100%
    }

    .group input, .group select {
        width: 100%
    }

    .donation-button {
        width: 100%
    }

    .donation-button button {
        width: 100%;
        margin: 40px 0
    }

    .success-donation {
        width: 90%;
        height: 30%;
        margin-top: 40%;
        font-size: 1rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .form-container {
        padding: 30px
    }

    h1 {
        font-size: 1.4rem
    }

    .donation-amount,
    .my-data,
    .my-donation,
    .payment-method {
        width: 100%
    }

    .display-flex-row {
        display: grid;
        grid-template-columns: 49% 49%;
        column-gap: 10px;
        row-gap: 10px
    }

    label.pickBox {
        width: 100%
    }

    .payment-method label.pickBox {
        height: 100px;
        line-height: 1
    }

    .payment-method img {
        width: 40%;
        height: 40%;
        margin: 20px 0
    }

    .donation-amount h2,
    .my-data h2,
    .my-donation h2,
    .payment-method h2 {
        position: absolute;
        padding: 0 10px;
        left: 20px
    }

    .my-desired-amount {
        display: flex;
        flex-direction: column
    }

    .desired-amount-input {
        text-align: right;
        width: 48%;
        font-size: 1.5rem;
        padding-right: 30px
    }


    .my-desired-amount label.desired-amount:before {
        right: 12%;
        top: 65%;
        font-size: 1.5rem
    }

    .donation-amount, .my-data, .my-donation, .payment-method {
        padding: 50px 30px;
    }

    .summary {
        width: 100%
    }

    .group input, .group select {
        width: 100%
    }

    .donation-button {
        width: 100%
    }

    .donation-button button {
        width: 100%;
        margin: 40px 0
    }

    .success-donation {
        width: 90%;
        height: 30%;
        margin-top: 40%;
        font-size: 1em;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .form-container {
        padding: 50px
    }

    .donation-amount,
    .my-data,
    .my-donation,
    .payment-method {
        padding: 50px 30px
    }

    .group input, .group select {
        width: 100%
    }

    .desired-amount-input {
        padding-right: 20px;
        width: 50%
    }

    .donation-button {
        width: 100%
    }

    .donation-button button {
        width: 50%;
        margin: 40px 0
    }

    .success-donation {
        width: 70%;
        height: 30%
    }
}

@media (min-width: 993px) {
    .form-container {
        padding: 50px
    }

    .donation-amount,
    .my-data,
    .my-donation,
    .payment-method {
        width: 100%
    }

    .group input, .group select {
        width: 100%
    }

    .donation-button {
        width: 100%
    }

    .donation-button button {
        width: 50%;
        margin: 40px 0
    }
}