/* Define how SqPaymentForm iframes should look */
.sln-btn .sq-input {
    border-bottom: 1px solid #dedede;
    outline-offset: -2px;
    margin-bottom: 5px;
    display: inline-block;
    height: 35px;
    background-color: #fff;
    border-radius: 0px;
    padding: 5px;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sln-btn .sq-input--focus {
    outline: 5px auto rgb(59, 153, 252);
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sln-btn .sq-input--error {
    outline: 5px auto rgb(255, 97, 97);
}

/* Customize the "Pay with Credit Card" button */
.sln-btn .button-credit-card {
    min-width: 200px;
    min-height: 20px;
    padding: 0;
    margin: 5px;
    line-height: 20px;
    box-shadow: 2px 2px 1px rgb(200, 200, 200);
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid rgb(200, 200, 200);
    font-weight: bold;
    cursor: pointer;
}

/* Customize the "{{Wallet}} not enabled" message */
.sln-btn .wallet-not-enabled {
    min-width: 200px;
    min-height: 40px;
    max-height: 64px;
    padding: 0;
    margin: 10px;
    line-height: 40px;
    background: #eee;
    border-radius: 5px;
    font-weight: lighter;
    font-style: italic;
    font-family: inherit;
    display: block;
}

/* Customize the Apple Pay on the Web button */
.sln-btn .button-apple-pay {
    min-width: 200px;
    min-height: 40px;
    max-height: 64px;
    padding: 0;
    margin: 10px;
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.sln-btn #sq-walletbox {
    float: left;
    margin: 5px;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}

.sln-btn #sq-ccbox {
    float: left;
    margin: 0px;
    padding: 10px;
    vertical-align: top;
    font-weight: normal;
    background: #f9f9f9;
    text-align: left;
    color: #003e58;
}

#sln-salon #sq-ccbox p {
    line-height: 2em;
    text-transform: none;
    margin-bottom: 0px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
}

#sln-salon #sq-ccbox legend {
    font-size: 1rem;
    text-transform: none;
    text-align: center;
    font-weight: 600;
}

.sln-btn #sq-ccbox table td {
    text-align: left;
}
#sln-salon .sln-btn #sq-creditcard {
    background: #0d7eba;
    margin-top: 20px;
    height: 40px;
    font-weight: 600;
    text-transform: none;
    padding: 0px;
}
#sln-salon .sln-btn #nonce-form {
    padding: 0px;
}

#sln-salon #apple-pay-button {
    width: 100%;
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    -apple-pay-button-style: black;
}
#sln-salon #apple-pay-button:empty {
    display: none;
}

#sln-salon .sln-payment-actions .square-up-wrapper,
#sln-salon .sln-payment-actions .square-up-wrapper:hover,
#sln-salon .sln-payment-actions .square-up-wrapper:focus {
    box-shadow: none;
    background-color: white;
}

#sln-salon .square-up-wrapper #card-button .sln-btn__info {
    word-wrap: break-word;
    white-space: break-spaces;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
#sln-salon .square-up-wrapper .spinner {
    display: flex;
    width: 100%;
    position: absolute;
    z-index: 9999;
    top: -2.7em;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}
@media only screen and (min-width: 768px) {
    #sln-salon .square-up-wrapper .spinner {
        bottom: 0.8333333333em;
    }
}
#sln-salon .square-up-wrapper .spinner:after {
    position: relative;
    font: normal 20px/1 dashicons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f463";
    display: inline-block;
    animation: rotation 2s infinite linear;
    font-size: 1.5em;
}
#sln-salon .square-up-wrapper #card-container:not(:empty) {
    margin-bottom: 1.5em;
}
#sln-salon .square-up-wrapper .spinner:not(.hide) + #payment-form {
    opacity: 0.5;
}