@charset "UTF-8";
* {
    box-sizing: border-box
}

a {
    color: #277777
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

input[type=number] {
    -moz-appearance: textfield;
    -o-appearance: textfield;
    appearance: textfield
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

h1 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px
}

h2 {
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;
    margin-top: 0
}

h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media (min-width: 601px) {
    .page .form-container {
        width: 100%
    }
}

.page .form-group.two-columns {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

@media (min-width: 601px) {
    .page .form-group .form-label {
        padding-right: 1rem;
        white-space: nowrap
    }

    .page .form-group .form-label label {
        color: #90908d;
        text-rendering: optimizelegibility;
        font-weight: 400;
        transition-duration: .2s
    }

    .page .form-group.is-focused .form-label label {
        color: inherit
    }
}

.page .form-group .form-input {
    font-size: 1.1em;
    position: relative
}

.page .form-group .form-input .rightSvgAdornment {
    position: absolute;
    z-index: 10;
    display: block;
    transform-origin: top right;
    right: 14px;
    top: 13px;
    pointer-events: none;
    height: 18px
}

.page .form-group .form-input.take-two-columns {
    grid-column: 1/3
}

.page .form-group .form-input .floating-label {
    position: absolute;
    z-index: 10;
    color: rgba(0, 0, 0, .6);
    font-size: 16px;
    white-space: nowrap;
    display: block;
    transform-origin: top left;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px);
    left: 0;
    top: 4px;
    transform: translate(10px, 10px) scale(1);
    transition: color .2s cubic-bezier(0, 0, .2, 1) 0s, transform .2s cubic-bezier(0, 0, .2, 1) 0s, max-width .2s cubic-bezier(0, 0, .2, 1) 0s;
    pointer-events: none;
    padding: 0 4px
}

.page .form-group .form-input .floating-label.always-active {
    background: #fff;
    transform: translate(10px, -8px) scale(.75)
}

.page .form-group .form-input .floatingLabelField > input::-moz-placeholder {
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 0s;
    opacity: 0
}

.page .form-group .form-input .floatingLabelField > input:-ms-input-placeholder {
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 0s;
    opacity: 0
}

.page .form-group .form-input .floatingLabelField > input::placeholder {
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 0s;
    opacity: 0
}

.page .form-group .form-input .floatingLabelField.has-value > input::-moz-placeholder, .page .form-group .form-input .floatingLabelField.is-focused > input::-moz-placeholder {
    opacity: .42
}

.page .form-group .form-input .floatingLabelField.has-value > input:-ms-input-placeholder, .page .form-group .form-input .floatingLabelField.is-focused > input:-ms-input-placeholder {
    opacity: .42
}

.page .form-group .form-input .floatingLabelField.has-value > input::placeholder, .page .form-group .form-input .floatingLabelField.is-focused > input::placeholder {
    opacity: .42
}

.page .form-group .form-input .floatingLabelField.is-focused + .floating-label {
    color: #277777;
    background: #fff;
    transform: translate(10px, -8px) scale(.75)
}

.page .form-group .form-input .floatingLabelField.has-value + .floating-label {
    background: #fff;
    transform: translate(10px, -8px) scale(.75)
}

.page .form-group .form-input .floatingLabelField.is-touched.is-invalid + .floating-label {
    color: #d32f2f
}

@media (min-width: 601px) {
    .page .form-group .form-input {
        font-size: 1em
    }

    .page .form-group .form-input input, .page .form-group .form-input select {
        font-size: 1rem
    }
}

.page .form-group .form-input:after {
    content: "";
    display: block;
    clear: both
}

.page .form-group .form-input.take-two-columns {
    grid-column: 1/3
}

.page .input-large, .page .input-medium {
    width: 100%
}

.page .input-small {
    width: 100%
}

.page .input-tiny {
    max-width: 50px
}

.page .form-col-small {
    width: 40%;
    padding-right: 8px;
    float: left
}

.page .form-col-large {
    width: 60%;
    float: left
}

.page .box-information.box-information-required-fields {
    display: none
}

.page .hidden {
    display: none
}

select {
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    padding: 0 25px 0 0;
    -webkit-padding-start: 4px;
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: right 5px center
}

select::-ms-expand {
    display: none
}

@supports (-ms-ime-align:auto) {
    select {
        background-image: url(Images/responsive-select-ie-hack.svg)
    }
}

.matchMuiSize input:not(.MuiInputBase-input) {
    height: 40px
}

input:not(.MuiInputBase-input), select {
    border: 1px solid #c4c4c4;
    box-shadow: none;
    border-radius: 8px;
    padding: 10px;
    height: 44px
}

input:not(.MuiInputBase-input):hover, select:hover {
    border-color: #212121
}

input:not(.MuiInputBase-input):focus, select:focus {
    outline: 0;
    border-color: #277777;
    border-width: 2px;
    transition-duration: .2s
}

input:not(.MuiInputBase-input).input-error, input:not(.MuiInputBase-input).input-validation-error, select.input-error, select.input-validation-error {
    border-color: #d32f2f;
    color: #d32f2f
}

input:not(.MuiInputBase-input):disabled, select:disabled {
    background: #e4e4e4;
    cursor: not-allowed !important
}

input[type=checkbox] {
    width: 16px
}

input[type=checkbox]:focus {
    outline: dotted 1px;
    border-color: #277777;
    border-width: 1px;
    transition-duration: .2s
}

textarea {
    resize: vertical
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.box-error, .box-information, .box-success, .box-warning {
    border-radius: 8px;
    margin: 0 0 1.5rem;
    padding: 1rem;
    overflow: hidden;
    width: 100%;
    display: table
}

.box-error.no-margin, .box-information.no-margin, .box-success.no-margin, .box-warning.no-margin {
    margin: 0
}

.box-error.inherit-border-radius, .box-information.inherit-border-radius, .box-success.inherit-border-radius, .box-warning.inherit-border-radius {
    border-radius: inherit
}

.box-error > .icon, .box-information > .icon, .box-success > .icon, .box-warning > .icon {
    display: none
}

.box-information {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f
}

.box-success {
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d
}

.box-error {
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #d32f2f
}

.box-warning {
    background-color: #f5a623;
    border-color: #f5a623;
    color: #fef8ee
}

.btn {
    background-color: #fff;
    background-image: none;
    border-radius: 8px;
    color: #141415;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    line-height: 2rem;
    min-height: 40px;
    min-width: 40px;
    padding: .4rem;
    position: relative;
    text-align: center;
    text-decoration: none
}

.btn:active, .btn:focus, .btn:hover {
    background: #e7e7e7
}

.btn[disabled] {
    filter: grayscale(1);
    opacity: .5;
    pointer-events: none;
    transition-duration: .2s
}

.btn.btn-next {
    background-color: #277777;
    border: 0;
    color: #fff;
    min-width: 9rem;
    overflow: hidden;
    position: relative
}

.btn.btn-next:active, .btn.btn-next:focus, .btn.btn-next:hover {
    background: rgb(28.9291139241, 88.2708860759, 88.2708860759)
}

.btn.btn-block {
    display: block
}

.btn.hidden {
    display: none
}

.btn.loading {
    pointer-events: none
}

.btn.loading:not([data-progress-text]) {
    animation: blinking-shadow 1.5s linear infinite
}

.btn.loading[data-progress-text]:after {
    animation: vertical-flip 350ms, blinking-shadow 1.5s linear infinite;
    background: inherit;
    border-radius: inherit;
    box-sizing: border-box;
    content: attr(data-progress-text) "…";
    height: 100%;
    left: 0;
    min-width: 100%;
    padding: inherit;
    position: absolute;
    top: 0
}

.details-summary-widget > span:first-of-type {
    cursor: pointer
}

.no-break {
    white-space: nowrap
}

@keyframes blinking-shadow {
    0% {
        box-shadow: 0 0 6px rgb(13.8227848101, 42.1772151899, 42.1772151899)
    }
    50% {
        box-shadow: 0 0 3px rgb(66.7088607595, 193.2911392405, 193.2911392405)
    }
    100% {
        box-shadow: 0 0 6px rgb(13.8227848101, 42.1772151899, 42.1772151899)
    }
}

@keyframes vertical-flip {
    0% {
        opacity: 0
    }
    71.42% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

html {
    color: #141415;
    font-family: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    line-height: 1.4;
    width: 100%;
    height: 100%;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

html:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    z-index: -1
}

html body {
    margin: 0
}

html body .box-content {
    position: relative;
    padding: 8px
}

@media (min-width: 601px) {
    html body .box-content {
        max-width: 516px;
        margin-left: auto;
        margin-right: auto
    }
}

html body .box-content .line {
    width: 100%;
    height: 16px;
    border-bottom: 2px solid #eee;
    text-align: center;
    margin-bottom: 23px;
    margin-top: 12px
}

html body .box-content .line span {
    font-size: 20px;
    background-color: #fff;
    padding: 0 10px
}

html body .box-content main fieldset:not(.MuiOutlinedInput-notchedOutline) legend {
    display: none
}

html body .box-content .box-header {
    width: 100%;
    position: relative
}

@media (min-width: 601px) {
    html body .box-content .box-header {
        min-height: 2rem
    }
}

html body .box-content .box-header .box-shop {
    width: 100%
}

html body .box-content .box-header .box-shop .img-shop > img {
    margin: 8px auto;
    max-width: 100%;
    display: block;
    max-height: 80px
}

html body .box-content .box-main .react-header {
    margin-bottom: 16px
}

html body .box-content .box-main > .page {
    position: relative
}

html body .box-content .box-main .box-payment {
    clear: both;
    border: 1px solid #d1d2cb;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    min-height: 45px;
    position: relative;
    display: block;
    margin-bottom: 1rem
}

html body .box-content .box-main .box-payment .icon-hint {
    position: absolute;
    left: 0;
    top: .5rem;
    background-color: transparent
}

html body .box-content .box-main .box-payment .icon-hint .btn {
    display: none
}

html body .box-content .box-main .box-payment .icon-hint:before {
    color: #141415;
    content: "\e5d4";
    line-height: 3.333rem;
    display: inline-block;
    font-family: "Saferpay Icons";
    font-size: 24px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

html body .box-content .box-main .box-payment > span:first-of-type {
    text-align: center;
    display: block
}

html body .box-content .box-main .box-payment .text-hint {
    -ms-word-break: break-all;
    word-break: break-word;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    width: 100%
}

html body .box-content .box-main .box-payment .text-amount, html body .box-content .box-main .box-payment .text-currency {
    font-size: 2rem;
    line-height: 4rem
}

@media (min-width: 601px) {
    html body .box-content .box-main .box-payment .text-amount, html body .box-content .box-main .box-payment .text-currency {
        line-height: 2.5rem
    }
}

html body .box-content .box-main .box-payment .text-currency {
    font-size: 1.5rem;
    margin-right: .25rem
}

html body .box-content .box-main .box-payment .text-offer-description {
    white-space: pre-line
}

@supports (-ms-ime-align:auto) {
    html body .box-content .box-main .box-payment .text-offer-description {
        word-wrap: break-word;
        word-break: break-all
    }
}

html body .box-content .box-main .box-payment .text-merchant, html body .box-content .box-main .box-payment .text-offer, html body .box-content .box-main .box-payment .text-total-amount {
    display: none
}

@media (max-width: 600px) {
    html body .box-content .box-main .box-payment .text-hint > .text {
        display: block;
        padding: 1rem;
        border-top: 1px solid #d1d2cb
    }
}

html body .box-content .box-main .box-payment .text-merchant-city, html body .box-content .box-main .box-payment .text-merchant-country, html body .box-content .box-main .box-payment .text-merchant-mail, html body .box-content .box-main .box-payment .text-merchant-page, html body .box-content .box-main .box-payment .text-merchant-phone, html body .box-content .box-main .box-payment .text-merchant-street, html body .box-content .box-main .box-payment .text-muted {
    color: #90908d;
    font-size: .9rem;
    word-break: break-all
}

@media (min-width: 601px) {
    html body .box-content .box-main .box-payment {
        border: none;
        box-shadow: none;
        display: table-cell;
        padding: 1rem;
        width: 35%;
        vertical-align: top
    }

    html body .box-content .box-main .box-payment span {
        display: inline-block;
        width: auto;
        background-color: inherit;
        border: none;
        box-shadow: none;
        cursor: default
    }

    html body .box-content .box-main .box-payment .text-hint > span, html body .box-content .box-main .box-payment > span:first-of-type {
        text-align: left;
        display: block;
        margin-bottom: 5px
    }

    html body .box-content .box-main .box-payment .text-merchant, html body .box-content .box-main .box-payment .text-offer, html body .box-content .box-main .box-payment .text-total-amount, html body .box-content .box-main .box-payment > span:first-of-type::before {
        display: block;
        border-bottom: 1px solid #eee;
        margin: 0 0 5px;
        color: #90908d;
        text-rendering: optimizelegibility
    }

    html body .box-content .box-main .box-payment .icon-hint {
        display: none
    }
}

html body .box-content .box-law {
    padding: 2rem 0;
    text-align: center;
    display: block
}

html body .box-content .box-law .text-trademark > span {
    display: inline-block;
    padding-bottom: 5px
}

html body header {
    display: table;
    width: 100%;
    margin: 0 0 1rem
}

html body header h1 {
    display: table-cell;
    margin: 1em 0 .3em;
    overflow: hidden;
    vertical-align: middle;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px
}

html body header figure {
    display: table-cell;
    vertical-align: middle;
    margin: 1em 0 .3em;
    right: 5px;
    text-align: right;
    width: auto
}

html body header figure .img-logo {
    max-height: 40px;
    max-width: 40px;
    vertical-align: middle
}

html body header figure .img-logo-Diners-Discover {
    max-height: 46px;
    max-width: 73px;
    vertical-align: middle
}

html body footer {
    width: 100%
}

html body footer ul {
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (min-width: 601px) {
    html body footer ul {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

html body footer ul li {
    display: block;
    white-space: nowrap
}

@media (min-width: 601px) {
    html body footer ul li {
        -ms-flex: 1;
        flex: 1
    }
}

html body footer .navitem a {
    color: #277777
}

html body footer .navitem button {
    border: none;
    color: #277777;
    width: 100%
}

html body .page main .icon-hint, html body form[class^=page-] main .icon-hint {
    background-color: #d1d2cb;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    width: 2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

html body .page fieldset legend, html body form[class^=page-] fieldset legend {
    border-color: #d1d2cb;
    border-style: none none solid;
    border-width: 0 0 1px;
    color: #90908d;
    display: none;
    font-size: 1.5rem;
    line-height: inherit;
    margin-bottom: 1rem;
    padding: 0;
    width: 100%
}

html body .page.page-hosted fieldset legend, html body form[class^=page-].page-hosted fieldset legend {
    display: block
}

.page-paymentselection:not(.content-card) main ul li button {
    border-radius: 24px
}

.page-paymentselection .creditcard-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.page-paymentselection .creditcard-card__title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.page-paymentselection .creditcard-card__title__icons {
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 4px
}

.page-paymentselection .creditcard-card__title__icons__icon {
    display: -ms-flexbox;
    display: flex;
    width: 36px;
    padding: 4px;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .12)
}

.page-paymentselection .creditcard-card__title__icons__icon img {
    height: 100%;
    width: 100%;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    -o-object-fit: contain;
    object-fit: contain
}

.page-paymentselection .creditcard-card form {
    width: 100%
}

.page-paymentselection .alternative.alternative-paymentmethods-only-header {
    font-size: 17px
}

.page-paymentselection main h2 {
    color: #4e4e4e;
    display: block;
    font-size: 12px;
    margin: 1px
}

.page-paymentselection main ul {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: 1fr;
    gap: 6px
}

.page-paymentselection main ul li {
    overflow: hidden;
    display: inline-block;
    height: 60px
}

.page-paymentselection main ul li:active, .page-paymentselection main ul li:focus, .page-paymentselection main ul li:hover {
    border-color: rgba(0, 0, 0, .35)
}

.page-paymentselection main ul li form {
    width: 100%;
    height: 100%
}

.page-paymentselection main ul li button {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: none;
    box-shadow: none;
    padding: 12px
}

.page-paymentselection main ul li button.btn-select:active, .page-paymentselection main ul li button.btn-select:focus, .page-paymentselection main ul li button.btn-select:hover {
    background-color: #fff
}

.page-paymentselection main ul li button .img-selection-item {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: middle
}

.page-paymentselection main ul li button span ~ span {
    display: none
}

@media (max-width: 600px) {
    .page-paymentselection header h1 {
        font-size: 14px
    }

    .page-paymentselection main h2 {
        display: none
    }

    .page-paymentselection main section {
        display: inline
    }
}

.page-card main {
    padding: 0 0 1rem
}

.page-card main fieldset {
    border: none
}

.page-card main fieldset .icon-hint {
    background-color: #d1d2cb;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    width: 2rem
}

.page-card main fieldset .details-summary-widget .text-hint {
    font-size: 1rem
}

.page-card main fieldset .details-summary-widget .text-hint b, .page-card main fieldset .details-summary-widget .text-hint img {
    display: block;
    margin-top: 1.5rem
}

.page-card main .alternative-paymentmethods {
    display: block;
    padding: 0 0 3rem
}

.page-card main .alternative-paymentmethods .btn img {
    vertical-align: middle
}

.page-directdebit .text-mandate .box {
    margin-top: -1.5em;
    font-size: .9em;
    line-height: 1.3
}

.page-directdebit .form-group {
    margin-bottom: 8px
}

.page-address .form-label {
    min-width: 25%
}

.page-address .address-form .form-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.page-address main {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px
}

.page-address .address-use-billing .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.page-dcc .icon-check:before {
    display: inline-block;
    font-family: "Saferpay Icons";
    font-size: 24px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-style: normal;
    content: "\e901";
    vertical-align: sub
}

.page-dcc .checkbox-icon {
    margin-left: -34px;
    width: 24px;
    height: 18px;
    display: inline-block;
    float: left
}

.page-card-bancontact .section-waiting {
    display: none
}

.page-card-bancontact .section-waiting > div {
    position: relative;
    min-height: 4em
}

.page-card-bancontact .qrcode-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.page-card-bancontact .box-qrcode > div {
    display: -ms-flexbox;
    display: flex;
    text-align: center
}

.js-enabled .page-card-bancontact .bancontact_header_with_icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px
}

.js-enabled .page-card-bancontact .bancontact_header_with_icon h2 {
    margin-top: 0;
    margin-bottom: 0
}

.js-enabled .page-card-bancontact .bancontact_header_with_icon img {
    max-height: 36px
}

.js-enabled .page-card-bancontact .section-app .btn {
    background-color: #eee;
    margin-top: 3px
}

.js-enabled .page-card-bancontact .section-app .box-qrcode .btn {
    display: none
}

.js-enabled .page-card-bancontact .section-app .qrcode-instructions {
    display: none
}

@media (max-width: 600px) {
    .js-enabled .page-card-bancontact .section-app .box-qrcode .btn {
        display: block
    }

    .js-enabled .page-card-bancontact .section-app .box-qrcode > div {
        display: none;
        text-align: center
    }
}

@media (min-width: 601px) {
    .js-enabled .page-card-bancontact .section-input {
        width: 100%
    }

    .js-enabled .page-card-bancontact .section-input > section h2 {
        margin-top: 0
    }

    .js-enabled .page-card-bancontact section:nth-of-type(2).section-card .form-group .form-input {
        min-width: auto !important
    }

    .js-enabled .page-card-bancontact section:nth-of-type(2).section-card .form-group > div {
        display: block !important
    }
}

@media (min-width: 1200px) {
    .js-enabled .page-card-bancontact .section-app .box-openapp {
        display: none
    }

    .js-enabled .page-card-bancontact .section-app .qrcode-instructions {
        display: block
    }

    .js-enabled .page-card-bancontact .section-app .qrcode-instructions-or {
        display: none
    }
}

.page-wait-ideal .section-waiting > div, .page-wait-sofort .section-waiting > div {
    position: relative;
    display: table;
    margin: 0 auto
}

.page-klarna .klarna-widget.disabled {
    opacity: .5;
    filter: grayscale(1);
    pointer-events: none
}

.page-klarna .klarna-widget__head {
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    padding: 1.125em 0 .3em;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: solid 1px #d1d2cb
}

.page-klarna .klarna-widget__head * {
    margin: 0 0
}

.page-klarna .klarna-widget__head span {
    font-size: 1.5em;
    font-weight: 400;
    overflow: hidden
}

.page-klarna .klarna-widget__head img {
    margin-left: auto;
    height: 1.8em
}

.page-klarna .klarna-widget__head:focus {
    outline: 0
}

.page-klarna .klarna-widget__head.open {
    border: none
}

.page-klarna .klarna-widget__radio {
    margin-right: .5em
}

.page-stand-alone {
    height: 100%
}

.page-stand-alone .stand-alone-frame {
    width: 100%;
    min-height: 700px;
    border: none;
    overflow: auto
}

.page-onlinebanking-ideal select {
    width: 100%
}

.page-error main {
    color: #d32f2f;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.page-error main .error-icon-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.page-error main .error-icon-container .error-icon {
    height: 64px
}

.theme-worldline {
    background-color: #f6f6f7
}

.theme-worldline:before {
    background-color: #f6f6f7;
    height: 140px
}

.theme-worldline .box-law {
    color: rgba(0, 0, 0, .52)
}

.theme-bsallpos {
    background-color: #e5eef4
}

.theme-bsallpos:before {
    background-color: #e5eef4;
    height: 140px
}

.theme-bsallpos .box-law {
    color: rgba(0, 0, 0, .52)
}

.theme-bsallpos .btn.btn-next {
    background: #5ba1be;
    border-color: #5ba1be;
    color: #fff
}

.theme-bsallpos .btn.btn-next:hover {
    background: rgb(50.807860262, 105.5240174672, 128.192139738);
    border-color: rgb(50.807860262, 105.5240174672, 128.192139738);
    color: #fff
}

.theme-bsallpos a {
    color: #5ba1be
}

.theme-bsallpos .floatingLabelField.is-focused + .floating-label {
    color: #5ba1be
}

.theme-bsallpos input:focus, .theme-bsallpos select:focus {
    border-color: #5ba1be
}

.theme-ccv {
    background-color: #f5f3f1
}

.theme-ccv:before {
    background-color: #fff;
    height: 160px
}

.theme-ccv .box-law {
    color: rgba(0, 0, 0, .52)
}

.theme-ccv .btn.btn-next {
    background: #5ba1be;
    border-color: #5ba1be;
    color: #fff
}

.theme-ccv .btn.btn-next:hover {
    background: rgb(50.807860262, 105.5240174672, 128.192139738);
    border-color: rgb(50.807860262, 105.5240174672, 128.192139738);
    color: #fff
}

.theme-ccv a {
    color: #5ba1be
}

.theme-ccv .floatingLabelField.is-focused + .floating-label {
    color: #5ba1be
}

.theme-ccv input:focus, .theme-ccv select:focus {
    border-color: #5ba1be
}

.theme-concardis {
    background-color: #fff
}

.theme-concardis:before {
    background-color: #fff;
    height: 140px
}

.theme-concardis .box-law {
    color: rgba(0, 0, 0, .52)
}

.theme-concardis .btn.btn-next {
    background: #5ba1be;
    border-color: #5ba1be;
    color: #fff
}

.theme-concardis .btn.btn-next:hover {
    background: rgb(50.807860262, 105.5240174672, 128.192139738);
    border-color: rgb(50.807860262, 105.5240174672, 128.192139738);
    color: #fff
}

.theme-concardis a {
    color: #5ba1be
}

.theme-concardis .floatingLabelField.is-focused + .floating-label {
    color: #5ba1be
}

.theme-concardis input:focus, .theme-concardis select:focus {
    border-color: #5ba1be
}

.theme-bnppf {
    background-color: #fff
}

.theme-bnppf:before {
    background-color: #fff;
    height: 140px;
    border-bottom: 5px solid #7ec7aa
}

.theme-bnppf .box-content .box-header .box-shop .img-shop > img {
    margin-top: .5rem;
    margin-bottom: 1rem
}

@media (min-width: 601px) {
    .theme-bnppf .box-content .box-header .box-shop .img-shop > img {
        margin-left: 0;
        margin-right: 0
    }
}

.theme-bnppf .box-law {
    color: #444
}

.theme-bnppf .box-content main fieldset legend {
    display: none
}

.theme-bnppf .navitem .btn {
    color: #666
}

.theme-bnppf .btn.btn-next {
    background: #00bf6f url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAATCAYAAABLN4eXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFENkI3ODY3ODlERTExRTQ4OEM3QzE5RDAwRDIyQjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFENkI3ODY4ODlERTExRTQ4OEM3QzE5RDAwRDIyQjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUQ2Qjc4NjU4OURFMTFFNDg4QzdDMTlEMDBEMjJCOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUQ2Qjc4NjY4OURFMTFFNDg4QzdDMTlEMDBEMjJCOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4HctTWAAAAfklEQVR42mL4//8/AxSrAPF5INZFEsOKkTU8+Q8BrwlpRNfwnxiNIOLqf+wAp0YQYQfE30nRCGMEAvFfYjUim5DyHzdA0Yju3lpiNGILncmENDKCdaICNiC+A8SyDNjBdbJsothPJIceyfFEVoq4TE7aIyuVk5WfSM65AAEGAIzbK3CsLbMaAAAAAElFTkSuQmCC) no-repeat scroll center right 15px;
    border-color: #00bf6f;
    padding-left: 20px;
    padding-right: 40px;
    color: #fff
}

.theme-bnppf .btn-abort, .theme-bnppf .btn-back {
    min-width: 6em
}

.theme-bnppf a {
    color: #00bf6f
}

.theme-bnppf .floatingLabelField.is-focused + .floating-label {
    color: #00bf6f
}

.theme-bnppf input:focus, .theme-bnppf select:focus {
    border-color: #00bf6f
}

.theme-commerzbank {
    background-color: #fff
}

.theme-commerzbank:before {
    background-color: #fff;
    height: 140px;
    border-bottom: 5px solid #fc3
}

.theme-commerzbank .box-content .box-header .box-shop .img-shop > img {
    margin-top: .5rem;
    margin-bottom: 1rem
}

.theme-commerzbank .box-language {
    display: table-header-group;
    top: -40px;
    bottom: unset;
    position: absolute;
    overflow: visible
}

.theme-commerzbank .box-language .icon-hint {
    color: #fff
}

.theme-commerzbank .box-law {
    color: #444
}

.theme-commerzbank .box-content main fieldset legend {
    display: none
}

.theme-commerzbank .navitem .btn {
    color: #666
}

.theme-commerzbank .btn.btn-next {
    background: #fc3;
    border-color: #fc3;
    color: #fff
}

.theme-commerzbank .btn-abort, .theme-commerzbank .btn-back {
    min-width: 6em
}

.theme-commerzbank a {
    color: #fc3
}

.theme-commerzbank .floatingLabelField.is-focused + .floating-label {
    color: #fc3
}

.theme-commerzbank input:focus, .theme-commerzbank select:focus {
    border-color: #fc3
}

#paymentselection-pay-button:before, .pay-button:before {
    content: "";
    position: relative;
    display: inline-block;
    height: 1em;
    width: 1.25em;
    background-size: 100% 109%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white" focusable="false" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z"></path></svg>');
    background-repeat: no-repeat
}

#paymentselection-pay-button {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    margin-top: 16px
}

.cardnumber__logos {
    margin-right: 10px
}

.horizontal-separator-with-text {
    margin: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flexbox;
    display: flex;
    border: 0;
    white-space: nowrap;
    text-align: center
}

.horizontal-separator-with-text:before {
    content: "";
    -ms-flex-item-align: center;
    align-self: center;
    width: 100%;
    border-top: thin solid rgba(0, 0, 0, .12)
}

.horizontal-separator-with-text:after {
    content: "";
    -ms-flex-item-align: center;
    align-self: center;
    width: 100%;
    border-top: thin solid rgba(0, 0, 0, .12)
}

.horizontal-separator-with-text > span {
    padding-right: 9.6px;
    padding-left: 9.6px;
    display: inline-block;
    color: #141415
}

.gender-dropdown {
    min-width: 50%
}

.content-card {
    border-radius: 24px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .03);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .12)
}

.content-card-padding {
    padding: 16px
}

.content-card .content-card {
    box-shadow: none;
    border-radius: 8px
}

.creditcard-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.no-script {
    border-radius: inherit
}

.btn.btn-abort.temporary-error-button {
    margin-top: 16px;
    width: 100%;
    color: #d32f2f;
    border: 1px solid #d32f2f
}

.btn.btn-abort.temporary-error-button:focus-visible {
    outline: 0
}