/* 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 .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 {
    background-color: #0277bd;
    color: white;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

#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;
    color: black;
}

#sln-salon .square-up-wrapper .spinner:after {
    animation: rotation 2s infinite linear;
}