html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
}

.container {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.content {
    text-align: center;
    display: inline-block;
}

.title {
    font-size: 69px;
}


/* ---------- Stripe payment form (Bootstrap-Material vibe, no gradient, no IE filter) ---------- */

hr { border: none; border-top: 1px solid #eee; margin: 12px 0; }
form { width: 100%; margin-top: 14px; min-height: 30px; }
label { font-size: 12px; color: #757575; }
.input-validation-error { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, .12) !important; }
.input-validation-error:empty { display: none !important; }
.field-validation-error { display: block; clear: both; color: #e53935; font-size: 13px; text-align: left; margin-top: 4px; }

.sbc-stripe-form { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } /* This is actually the iframe */

.sbc-payment-back {
    height: 100%; width: 100%;
    position: fixed; top: 0; left: 0;
    background: rgba(33, 33, 33, .55);
    z-index: 10001;
    backdrop-filter: blur(2px);
}

.sbc-payment-wrap {
    z-index: 10002;
    background: #fff;
    width: 360px;
    padding: 24px 24px 20px;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .12);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    color: #212121;
}

.sbc-payment-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: transparent;
    color: #9e9e9e;
    font-size: 22px;
    font-weight: 300;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    user-select: none;
}
.sbc-payment-close:hover { background: #f5f5f5; color: #424242; }

.sbc-payment-name {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #212121;
    margin: 4px 24px 4px 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sbc-payment-note {
    text-align: center;
    font-size: 13px;
    color: #757575;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sbc-payment-email {
    text-align: center;
    font-size: 13px;
    color: #424242;
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbc-payment-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
}
.sbc-payment-amount label {
    font-size: 13px;
    color: #424242;
    white-space: nowrap;
}
.sbc-payment-amount input {
    flex: 1;
    height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: right;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.sbc-stripe-form-section {
    margin: 12px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    clear: both;
}
.sbc-stripe-form-section input[type=text] {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 12px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    color: #212121;
    transition: background-color .15s;
}
.sbc-stripe-form-section input[type=text]:focus {
    outline: none;
    background: #f7f9ff;
}
.sbc-stripe-form-section input[type=text]:last-child { border-bottom: none; }
.sbc-stripe-form-section input.half { width: 50%; }
.sbc-stripe-form-section input.half:nth-child(even) { float: right; border-left: 1px solid #eeeeee; }

input::placeholder { color: #9e9e9e; }
input:focus { outline: none; }
.sbc-payment-amount input:focus,
.sbc-stripe-form-section input[type=text]:focus { border-color: #1976d2; }
.sbc-payment-amount input:focus { box-shadow: 0 0 0 2px rgba(25, 118, 210, .12); }

input[type=submit] {
    width: 100% !important;
    margin: 16px 0 4px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: #1976d2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(25, 118, 210, .35);
    transition: background-color .15s, box-shadow .15s, transform .05s;
}
input[type=submit]:hover {
    background: #1565c0;
    box-shadow: 0 2px 6px rgba(21, 101, 192, .45);
}
input[type=submit]:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(21, 101, 192, .35); }
input[type=submit]:disabled { background: #bdbdbd; box-shadow: none; cursor: not-allowed; }

.charge-error {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #c62828;
    background: #ffebee;
    border-radius: 4px;
}
.charge-error:empty { display: none; }