/* BLAZOR: hide connection modals */
/*.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected { display: none; }
#components-reconnect-modal { display: none !important; }*/

/* || BLAZOR */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid red; }

.validation-message { color: red; }

#blazor-error-ui { background: lightyellow; color: black; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }

    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }

    .blazor-error-boundary::after { content: "Er is een fout opgetreden." }
/* ^^ BLAZOR */


@font-face { font-family: pt-sans; src: url('/font/PTSans-Regular.ttf') format('truetype'); }

:root { --kerkaccept: #4a90e2; --kerkaccept-lighter: rgba(74, 144, 226, 0.5); }

html, body { font-family: pt-sans, "Helvetica Neue", Helvetica, Arial, sans-serif; }

html { background-color: #f4f4f4; }
body { background-color: white; width: 90vw; border: 1px solid #ccc; border-radius: 10px; box-shadow: 2px 2px 0 0 #eee; min-width: 300px; max-width: 700px; max-height: calc(100vh - 60px); margin: 50px auto; padding: 30px; }

footer { position: relative; bottom: 0; left: 0; width: 100%; height: 10px; }
#privacy { font-size: 0.8em; }

.topbar { width: 100%; min-height: 50px; max-height: 120px; margin-bottom: 15px; }
.topbar { border-bottom: 1px solid #ddd; min-height: 50px; }
    .topbar div { height: 100%; padding: 5px 0; }
    .topbar h1 { max-width: 400px; }
    .topbar .naam { display: block; }
    .topbar .korte-naam { display: none; }

.hr { border: 1px solid var(--kerkaccept); margin-left: -1.5rem; margin-right: -1.5rem; }

.bottombar { height: 24px; margin-top: 5px; padding-right: 0; margin-top: 10px; background-color: white; }
    .bottombar.bt-1 { border-top: 1px solid var(--kerkaccept); padding-top: 5px; padding-right: 0; }
    .bottombar div { float: right; margin-left: 3px; margin-right: 0; }
    .bottombar .logo-kerkaccept { width: 100px; }
    .bottombar span { float: right; display: inherit; margin: 2px auto; text-decoration: none; font-style: italic; font-size: 0.8em; color: black; }

.page { height: 100%; overflow-x: hidden; overflow-y: auto; }

#loader { display: none; position: absolute; top: 0; left: 0; z-index: 999; height: 100vh; width: 100vw; background-color: #eee; opacity: 0.8; }

#loader-message { background-color: white; color: black; width: 300px; margin-left: auto; margin-right: auto; margin-top: 100px; padding: 20px; }

.logo-kerkaccept { min-height: 50px; max-height: 100px; max-width: 400px; text-align: center; background-image: url('/img/kerkAccept.svg'); background-repeat: no-repeat; background-size: contain; }

#cultureselector { float: right; border-radius: 10px; background-color: white; padding: 5px; }

img.culture { width: 32px; padding: 0 5px 5px; }
    img.culture.selected { border-bottom: 2px solid var(--kerkaccept); }

#statusmessage { position: sticky; top: 0; z-index: 9; width: 100%; }

.clickable { cursor: pointer; }
    .clickable:hover { text-decoration: underline; }

.hide { display: none !important; }
.invisible { visibility: hidden; }

select { padding: 3px; cursor: pointer; }

a, .btn-link { color: #0071c1; }

.content { padding-top: 1.1rem; }
.disabled { cursor: not-allowed; }
.inline { display: inline-block; margin-right: 10px; }
.wrap { word-wrap: anywhere; }

.page { display: block !important; margin-left: auto; margin-right: auto; min-width: 280px; }

.main { padding: 10px; min-height: 180px; }

.relatie-logo { max-height: 80px; display: block; max-width: 60vw; }

h1 { color: var(--kerkaccept); }
    h1:focus { outline: none; }
h2 { color: var(--kerkaccept); }
h3 { color: var(--kerkaccept); margin-top: 20px; margin-bottom: 10px; }
h4 { color: var(--kerkaccept); margin-bottom: 20px; }

table { margin-bottom: 10px; }
    table td { padding: 10px 5px; }

form div { margin-top: 10px; }

.search { margin: 30px 0 20px 0; }

.alt-amounts { margin-bottom: 10px; }

.btn { margin: 3px; }

.btn-close:hover { transition: transform 250ms; transform: rotate(-90deg); transform-origin: center; }

.btn-primary, .btn-primary:active, .btn-primary:focus { color: #fff; background-color: var(--kerkaccept); border-color: var(--kerkaccept); letter-spacing: 2px; box-shadow: none; }
.btn-pay { width: 80%; margin-top: 20px; font-size: 1.2em; margin-left: 10%; margin-right: 10%; }
    .btn-pay:hover { background-color: #4085D6; border-color: #4085D6; }
    .btn-pay:focus { background-color: var(--bs-success); border-color: var(--bs-success); }

.btn.amount { font-weight: 600; margin-right: 15px; min-width: 90px; padding: 0.5rem; color: black; }
    .btn.amount.selected:hover { color: white; }
    .btn.amount.selected:not(:hover) { background-color: #E7FFE2; color: #198754; font-weight: 600; }
    .btn.amount.selected:focus { background-color: var(--bs-btn-hover-bg); color: white; }
    .btn.amount:focus { box-shadow: 0 0 0 0.1rem rgba(var(--bs-btn-focus-shadow-rgb), .5); }

.btn.btn-link.user-amount { color: unset; }

.euro { font-weight: 600; font-size: 1.6em; padding: 5px; margin-right: 6px; }

label { margin-right: 5px; }

input { vertical-align: top; padding: 5px; }
    input.input-pay { width: 150px; border-radius: 5px; border-width: 1px; font-size: 1.5em; font-weight: 600; background-color: #E7FFE2; color: #198754; -webkit-text-fill-color: #198754; -webkit-appearance: none; opacity: 1; }

.form-switch .form-check-input { height: 1.2em; width: 2.5em; margin-top: 2px; margin-right: 10px; background-size: 13px; box-shadow: none; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e"); border-color: rgb(0,0,0,0.5); }
.form-check-input:checked { background-color: var(--kerkaccept); border-color: var(--kerkaccept); }

label.form-check-label { cursor: pointer; max-width: calc(100% - 50px); }

.total-amount { margin-top: 70px; width: 80%; display: flex; align-items: center; }
    .total-amount div { margin-top: 0; }
    .total-amount .amount-euros { min-width: 100px; height: 100%; font-size: 1.4em; font-weight: 600; text-align: right; }
    .total-amount .amount-cents { min-width: 20px; height: 100%; margin: 8px 20px 0 2px; font-size: 0.8em; font-weight: 600; text-align: left; align-self: flex-start; }
    .total-amount .btn-pay { margin: 0; width: 100%; }

label.incl { font-size: 0.8em; font-style: italic; float: left; }

.select2-selection { min-height: 35px; }

.select-gemeente .logo { display: inline-block; box-sizing: content-box; max-width: 200px; padding: 20px; cursor: pointer; }
    .select-gemeente .logo img { max-width: 200px; max-height: 80px; }

.select-payment-method { height: 40px; width: 100%; border-radius: 5px; cursor: pointer; padding: 5px 20px; margin-bottom: 5px; }
    .select-payment-method:hover { background-color: var(--kerkaccept-lighter); }
.select-payment-issuer { width: 100%; border-radius: 5px; cursor: pointer; padding: 5px; margin-bottom: 5px; }
    .select-payment-issuer:hover { background-color: var(--kerkaccept-lighter); }
    .select-payment-issuer img { width: 50px; margin-right: 5px; }

.bedankt-img { margin-bottom: 5px; }

@media(prefers-color-scheme: light) {
    body { background-color: white; }
    .bottombar { background-color: white; }
}

@media(prefers-color-scheme: dark) {
    html { background-color: #555; }
    body { background-color: black; color: white; border-color: #777; box-shadow: 2px 2px 0 0 #333; }
    .logo-kerkaccept { background-image: url('/img/kerkAccept_dark.svg'); }
    #cultureselector { background-color: unset; }
    h1, h2, h3, h4 { color: unset; }
    select option { color: black; }
    .btn.amount { color: white; }
    .bottombar { height: 36px; padding: 6px 2px; border-radius: 3px; background-color: unset; }
        .bottombar.bt-1 { border-width: 3px; }
    span.select2-results li { color: black; }
    .bottombar span { color: unset; }
}

@media(max-width: 900px) {
    body { padding: 5px; }
    main { padding-left: 0; }
    img.culture { width: 24px; padding: 3px; padding-top: 0; }
    .btn.amount { margin-right: 5px; font-size: 1em; padding: 0.5rem; min-width: 70px; }
    select { max-width: 90%; }
}

@media(max-height: 900px) {
    body { margin-top: 2vh; height: 98vh; padding: 10px; }
    article { max-height: 96vh; }
    .page { max-height: 87vh; }
}

@media(max-height: 500px) {
    body { height: 100vh; }
    main { min-height: 100px; }
    .btn.amount { margin-right: 5px; font-size: 1em; padding: 0.5rem; min-width: 70px; }
}

@media(max-width: 500px) {
    body { width: 100vw; height: 100vh; margin-top: 0; padding: 10px; }
    .topbar .naam { display: none; }
    .topbar .korte-naam { display: block; }
    .total-amount { width: 100%; }
    .btn-pay { margin-left: 0; margin-right: 0; width: 100%; }
    .bottombar { padding-right: 2px; }

    html { background-color: white; }
    body { border: none; box-shadow: none; }
}