html, body {
    margin: 0 !important;
    padding: 0;
}

h1 {
    margin: 10px 25px;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
}

h2 {
    padding: 25px 0 15px;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    width: 100%;
}

.container {
    width: 100%;
    min-height: 500px;
    box-shadow: 0 3px 20px #00000012;
    border-radius: 15px;
    color: white;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-style: normal;
    position: relative;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 200px;
    margin: 10px 25px;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
}

.navigation span {
    display: inline-block;
    width: 200px;
}

.header .back {
    max-width: 15px;
    margin-right: 10px;
    cursor: pointer;
}

.app-progress {
    display: flex;
    justify-content: space-between;
    width: 60px;
    margin-right: 25px;
}

.app-progress .closed {
    width: 8px;
    height: 8px;
    background: white;
    border: 1px solid white;
    border-radius: 50%;
}

.app-progress .open {
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-radius: 50%;
}

.header-image {
    max-width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.form {
    display: flex;
    flex-direction: column;
    padding: 0 25px;
    width: calc(100% - 52px);
    min-height: 300px;
    margin-left: 1px;
    margin-top: -3px;
    background: white;
    color: #474747;
}

.form.rounded {
    border-radius: 15px;
    min-height: 510px;
}

.form .event {
    font: normal normal 300 13px/16px Ubuntu;
    color: #707070;
    margin-top: 10px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 50px;
    opacity: 0.2;
}

.current-progress {
    width: 70%;
    height: 8px;
    border-radius: 50px;
    margin-top: -8px;
}

.donations {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 8px 0 25px  ;
    color: #707070;
}

.amount {
    font: normal normal normal 13px/14px Ubuntu;
    font-weight: 400;
}

.amount span {
    font: normal normal normal 15px/14px Ubuntu;
    font-weight: 500;
}

.total {
    font: normal normal normal 13px/14px Ubuntu;
}

.beneficiary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.beneficiary .border {
    border: 1px solid #C4C4C4;
    border-radius: 50%;
    width: 63px;
    height: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.beneficiary .logo {
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
}

.beneficiary .small-participant-image {
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    margin: 0 0 0 -5px;
}

.beneficiary p.both {
    max-width: 60%;
}

.beneficiary p {
    font: normal normal 300 15px/18px Ubuntu;
    color: #707070;
    margin: 0 0 0 10px;
    padding: 0;
    max-width: 75%;
}

.beneficiary p span {
    font: normal normal normal 15px/18px Ubuntu;
    font-weight: 500;
}

.donation-amount {
    width: 30%;
    height: 50px;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 500 20px/24px Ubuntu;
    letter-spacing: 0;
    color: #474747;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 15px;
}

.donation-amount span {
    font: normal normal 300 11px/12px Ubuntu;
    letter-spacing: 0;
    color: #474747;
}

input[type='search'] {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    color: #C4C4C4;
    background-color: white;
    background-image: url('../img/embed/search-icon.png');
    background-position: 5px 7px;
    background-size: 15px 14px;
    background-repeat: no-repeat;
    padding: 6px 20px 6px 32px;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    margin-top: 15px;
}

.form.rounded .participants {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px;
    max-height: 300px;
    overflow: auto;
}

.form.rounded .participants.validation-error {
    border: 2px solid #dc3545 !important;
    border-radius: 5px;
    padding: 5px;
}

.form.rounded .participants.selected {
    padding-bottom: 60px;
    max-height: 240px;
}

.form.rounded .participant {
    margin-bottom: 15px;
    cursor: pointer;
    max-width: 49%;
}

.form.rounded .participant-image {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 98%;
}

.form.rounded .participant-name {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-width: 147px;
    font: normal normal normal 15px/15px Ubuntu;
    font-weight: 500;
    height: 46px;
    padding: 0 10px;
    margin-top: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form.rounded .participant-image.active {
    width: calc(98% - 6px);
    border-width: 3px;
    border-style: solid;
}

.form.rounded .button {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 26px;
    width: calc(100% - 52px);
    background: white;
    padding: 10px 0px;
}

.button {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    cursor: pointer;
}

.button-text {
    text-decoration: none;
}

.button.solo {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: 0;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 25px;
    cursor: pointer;
}

.button .single {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    padding: 17px 25px;
    width: 100%;
    border: 0;
    cursor: pointer;
}

.button .disabled {
    opacity: 50%;
}

.buttons .primary {
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    padding: 17px 25px;
}

.buttons .secondary {
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    background: white;
    font-size: 15px;
    padding: 17px 25px;
    text-decoration: none;
}

.form.rounded hr {
    width: 100%;
    border: 1px solid #DCDCDC;
    margin: 15px auto 15px;
}

.form.rounded .interval {
    display: flex;
    margin-bottom: 10px;
    gap: 10px;
}

.form.rounded .fixed_amount {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    gap: 7.5px;
    flex-wrap: wrap;
}

.form.rounded .choice {
    width: 47%;
    height: 35px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    font: normal normal normal 15px/17px Ubuntu;
    letter-spacing: 0;
    color: #474747;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

.form.rounded .grey-border {
    border-color: #C4C4C4;
}

.form.rounded .interval .choice {
    flex: 1;
    min-width: 0;
}

.form.rounded .fixed_amount .choice {
    width: calc((100% - 15px) / 3) !important;
    flex: 0 0 calc((100% - 15px) / 3) !important;
    max-width: calc((100% - 15px) / 3) !important;
    min-width: 0 !important;
    font: normal normal 500 20px/24px Ubuntu;
    height: 50px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.form.rounded .fixed_amount .choice.active {
    height: 48px;
    border-width: 2px;
    border-radius: 5px;
    width: calc((100% - 15px) / 3) !important;
    flex: 0 0 calc((100% - 15px) / 3) !important;
    max-width: calc((100% - 15px) / 3) !important;
    box-sizing: border-box;
}

.form.rounded .interval .choice.active {
    height: 33px;
    border-width: 2px;
    border-radius: 5px;
}

.form.rounded .amount_input {
    display: flex;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    height: 30px;
    padding: 10px 15px;
    font: normal normal 500 20px/24px Ubuntu;
    letter-spacing: 0;
    color: #474747;
    align-items: center;
}

.form.rounded .amount_input.validation-error {
    border: 2px solid #dc3545 !important;
}

.form.rounded .amount_input.validation-error input {
    border: none;
}

.form.rounded .amount_input input {
    border: 0;
    font: normal normal normal 20px/24px Ubuntu;
    letter-spacing: 0;
    width: 100%;
    margin-left: 10px;
}

.form.rounded .amount_explain {
    font: normal normal 300 11px/12px Ubuntu;
    letter-spacing: 0;
    color: #474747;
    display: inline-block;
    margin-top: 7px;
}

.form.rounded .payment-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form.rounded .payment-options .choice {
    height: 50px;
    width: calc(50% - 6px);
    margin-bottom: 10px;
    cursor: pointer;
    font: normal normal 300 12px / 16px Ubuntu;
    justify-content: left;
}

.form.rounded .payment-options .choice.inactive {
    display: none;
}

.form.rounded .payment-options .choice .logo {
    height: 30px;
    margin: 0 6px;
}

.form.rounded .payment-options .revert {
    justify-content: center;
    border-color: #C4C4C4;
    color: #707070;
}

/* Direct debit velden in stap 4 zelfde look & feel als overige inputs */
.form.rounded .directdebit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.form.rounded .directdebit-fields .input {
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 300 13px/14px Ubuntu;
    color: #474747;
    height: 35px;
    text-indent: 15px;
    box-sizing: border-box;
}

/* rekeningnummer + tenaamstelling naast elkaar */
.form.rounded .directdebit-fields .consumer-account,
.form.rounded .directdebit-fields .consumer-name {
    flex: 1 1 calc(50% - 4.5px);
    min-width: 0;
}

/* akkoord-vinkje volle breedte onder de twee velden */
.form.rounded .directdebit-fields .checkbox {
    flex: 1 1 100%;
}

.selected-options {
    display: flex;
    justify-content: left;
}

.payment-choice {
    width: 30%;
    height: 50px;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    letter-spacing: 0;
    color: #474747;
    display: flex;
    align-items: center;
    margin-top: 15px;
    font: normal normal 300 12px / 16px Ubuntu;
    margin-left: 10px;
    padding-right: 5px;
}

.payment-choice .logo {
    height: 30px;
    margin: 0 6px;
}

.ideal-bank {
    position: relative;
}

.ideal-bank select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.675em 6em 0.675em 1em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
    font: normal normal normal 15px/17px Ubuntu;
}

.ideal-bank::before,
.ideal-bank::after {
    --size: 0.5rem;
    position: absolute;
    content: "";
    right: 1rem;
    pointer-events: none;
}

.ideal-bank::before {
    top: 45%;
    display: inline-block;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    height: 8px;
    width: 8px;
    transform: rotate(-135deg);
}

.form.rounded hr.spaced {
    margin: 15px 0;
}

.form.rounded .names {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form.rounded .names .input {
    width: 47%;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 300 13px/14px Ubuntu;
    color: #474747;
    height: 35px;
    text-indent: 15px;
}

.form.rounded .email.input {
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 300 13px/14px Ubuntu;
    color: #474747;
    height: 35px;
    text-indent: 15px;
    margin: 10px 0;
}

.form.rounded .message {
    height: 40px;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 300 13px/14px Ubuntu;
    color: #474747;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.boxes {
    margin-top: 15px;
}

.checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
}

.checkbox.organisation {
    margin-top: -10px;
}

.checkbox label {
    font: normal normal 300 13px/15px Ubuntu;
    color: #474747;
    width: 310px;
}

.checkbox input[type='checkbox'] {
    height: 20px;
    width: 20px;
    border: 1px solid #707070;
    border-radius: 2px;
    margin-right: 6px;
}

.checkbox a {
    color: #474747;
    text-decoration: underline;
}

.form.rounded .button.final {
    padding: 5px 0;
    bottom: 22px;
}

.form.rounded .button.final .inactive {
    opacity: 30%;
}

.personal-details {
    padding-top: 25px;
    min-height: 485px !important;
}

.personal-details .first_and_prefix, .personal-details .address, .personal-details .first_and_prefix, .personal-details .postal {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 9px;
}

.personal-details .first_and_prefix .first {
    width: 65%;
    margin-right: 9px;
}

.personal-details .first_and_prefix .last {
    width: 33%;
}

.personal-details .firstname, .personal-details .consumer-account {
    margin-bottom: 9px;
}

.personal-details .input {
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    font: normal normal 300 13px/14px Ubuntu;
    color: #474747;
    height: 35px;
    text-indent: 15px;
}

.personal-details .organization-field {
    margin-bottom: 10px;
}

.personal-details .organization-row {
    display: flex;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 9px;
}

.personal-details .organization-row .organization-name {
    flex: 1;
}

.personal-details .organization-row .organization-type {
    flex: 1;
    height: 39px;
}

.personal-details .address-row {
    display: flex;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 9px;
}

.personal-details .address-row .postalcode-field {
    width: 35%;
    flex-shrink: 0;
}

.personal-details .address-row .housenumber-field {
    width: 30%;
    flex-shrink: 0;
}

.personal-details .address-row .addition-field {
    width: 25%;
    flex-shrink: 0;
}

.personal-details .street-field {
    margin-bottom: 9px;
}

.personal-details .city-field {
    margin-bottom: 9px;
}

.personal-details .address-lookup-status {
    font-size: 12px;
    margin-bottom: 9px;
    padding: 5px 0;
}

.personal-details .address-lookup-status .loading-indicator {
    color: #707070;
}

.personal-details .address-lookup-status .error-text {
    color: #dc3545;
}

.personal-details .readonly-field {
    background-color: #f5f5f5;
    color: #666;
}

.personal-details .address .first {
    width: 78%;
    margin-right: 9px;
}
.personal-details .address .last {
    width: 20%;
}

.personal-details .postal .first {
    width: 49%;
    margin-right: 9px;
}
.personal-details .postal .last {
    width: 49%;
}

.personal-details .phonenumber-field {
    margin-bottom: 9px;
}

.personal-details .city-country-row {
    display: flex;
    gap: 9px;
    width: 100%;
    margin-bottom: 9px;
}

.personal-details .city-country-row .city-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    height: 35px;
    box-sizing: border-box;
}

.personal-details .city-country-row .country-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    height: 35px;
    box-sizing: border-box;
}

.form.rounded .leave_message {
    font: normal normal 500 13px/18px Ubuntu;
    letter-spacing: 0;
    color: #707070;
    margin: 10px 0;
}
.form.rounded hr.final {
    margin-bottom: 0;
}

.form.rounded .character_counter {
    display: flex;
    justify-content: flex-end;
    font: normal normal 300 13px/14px Ubuntu;
    letter-spacing: 0;
    color: #474747;
    opacity: 0.5;
}

.form.rounded .character_counter.text-red {
    color: red;
}

.footer {
    display: flex;
    font-size: 11px;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    font-weight: 400;
}

.footer .icon {
    margin-right: 8px;
}

.footer .logo {
    width: 47px;
    margin-left: 8px;
}

.input.error {
    border: 1px solid red !important;
}

.input.validation-error {
    border: 2px solid #dc3545 !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
}

.choice.validation-error {
    border: 2px solid #dc3545 !important;
}

.checkbox.validation-error input[type='checkbox'] {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 3px #dc3545;
}

select.validation-error {
    border: 2px solid #dc3545 !important;
    background-color: #fff8f8;
}

.error-container {
    color: red;
    font-size: 12px;
    
    display: none;
}

.error-container.visible {
    display: block;
}

.error-container ul {
    list-style-type: none;
    padding: 0;
}



/*@media (min-width: 500px) {*/
/*    .container {*/
/*        width: 50%;*/
/*    }*/
/*}*/