/**

 * Saferpay PaymentService

 *

 * NOTICE OF LICENSE

 *

 * Once you have purchased the software with PIT Solutions AG / Six Payment services AG

 * or one of its  authorised resellers and provided that you comply with the conditions of this contract,

 * PIT Solutions AG and Six Payment services AG grants you a non-exclusive license,

 * unlimited in time for the usage of the software in the manner of and for the purposes specified in License.txt

 * available in extension package, according to the subsequent regulations

 *

 * DISCLAIMER

 *

 * Do not edit or add to this file if you wish to upgrade this extension to

 * newer versions in the future.

 *

 * @category Saferpay

 * @package Saferpay_PaymentService

 * @author PIT Solutions Pvt. Ltd.

 * @copyright Copyright (c) 2020 PIT Solutions AG. (www.pitsolutions.ch) and Six Payment services AG ( https://www.six-payment-services.com/)

 * @license https://www.webshopextension.com/en/licence-agreement-saferpay

 *

 */



.notify-wrapper {

    position: fixed;

    opacity: 0;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 9999;

    background-color: rgba(0, 0, 0, .5);

    -webkit-transition: .3s;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

}



.notify-wrapper * {

    box-sizing: border-box;

}



.notify-wrapper .notify-window {

    -webkit-transform: translate3d(0, 50px, 0);

    -webkit-transition: .3s cubic-bezier(0, 0, 0, 1);

    width: 300px;

    border-radius: .25em;

    overflow: hidden;

    font-size: .9em;

    user-select: none;

    box-shadow: 0 0.25em 1em 0 rgba(0, 0, 0, .3);

}



.notify-wrapper .notify-window h3 {

    margin: 0;

    padding: 1em 1em;

    font-size: 1em;

    font-weight: normal;

    line-height: 1.5em;

}



.notify-wrapper .notify-window h3 i {

    font-size: 1.5em;

    position: relative;

    top: .08em;

    margin-right: .25em;

}



.notify-wrapper .notify-window p {

    padding: 1em 1em 2em;

    margin: 0;

    background-color: #ffffff;

    color: #000000;

}



.notify-wrapper .notify-window .buttons {

    padding: .75em 1em;

    background-color: #f3f3f3;

    text-align: center;

}



.notify-wrapper .notify-window .buttons button {

    margin: 0 .5em;

    padding: .5em 2em;

    border-radius: .25em;

    font-size: 1em;

    border-width: 1px;

    outline: 0;

}



.notify-wrapper .notify-window .buttons .ok {

    background-image: linear-gradient(180deg, #ffffff, #e6e3e6 90%);

}



.notify-wrapper .notify-window .buttons .cancel {

    color: #888888;

}



.notify-wrapper .notify h3 {

    background-color: rgba(0, 0, 0, .5);

    color: #ffffff;

    text-align: center;

}



.notify-wrapper .alert h3 {

    background-color: #cc6666;

    color: #ffffff;

}



.notify-wrapper .confirm h3 {

    background-color: #3366cc;

    color: #ffffff;

}



.notify-wrapper .success h3 {

    background-color: #1b926c;

    color: #ffffff;

}



.notify-wrapper.show {

    opacity: 1;

}



.notify-wrapper.show .notify-window {

    -webkit-transform: translate3d(0, 0, 0);

}







.smallLoader {

    display: none;

    position: fixed;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    /*background:#f9f9f9 url(../images/ajax-loader.gif) center no-repeat;*/
    background:#f9f9f9 url(../images/AjaxLoader.gif) center no-repeat;
    

}





.smallLoader {

    display: none;

    position: fixed;

    background-color: #f9f9f9;

    left: 0px;

    top: 0px;

    right: 0;

    z-index: 9999;

    width: 100%;

    height: 100%;

    opacity: 0.5;

}



.smallLoader:after {

   /* content: "";*/

    color: #6d6d6d;

   /* font-size: 12px;*/

    width: 30px;

    height: 30px;

    border-radius: 50%;

    position: fixed;

    left: 0;

    right: 0;

    top: 45%;

    bottom: 0;

    margin: 60px auto;

    z-index: 99999;

  /*  -webkit-animation: load4 1.3s infinite linear;

    animation: load4 1.3s infinite linear;*/

    -webkit-transform: translateZ(0);

    -ms-transform: translateZ(0);

    transform: translateZ(0);
    
   /* content: "";*/

    animation: fa-spin .75s linear infinite;
    
    font-size: 30px;

    font-family: "Font Awesome 5 Free";
    line-height: 30px;
    

}



@-webkit-keyframes load4 {

    0%,

    100% {

        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;

    }

    12.5% {

        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;

    }

    25% {

        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;

    }

    37.5% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;

    }

    50% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;

    }

    62.5% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;

    }

    75% {

        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;

    }

    87.5% {

        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;

    }

}



@keyframes load4 {

    0%,

    100% {

        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;

    }

    12.5% {

        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;

    }

    25% {

        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;

    }

    37.5% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;

    }

    50% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;

    }

    62.5% {

        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;

    }

    75% {

        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;

    }

    87.5% {

        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;

    }

}



.sfwp-iframe {

    width: 100% !important;

    border: 0 !important;

}



iframe {

    overflow: hidden;

}





/* 30-12-19 loader*/



.ajax-loading {

    display: none;

    left: 50%;

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 999;

}



.ajax-loading>i {

    animation: ajax-loading 1s ease-in-out infinite;

    background-color: #4e4e4e;

    border-radius: 4px;

    display: inline-block;

    height: 18px;

    margin-right: 2px;

    width: 4px

}



.ajax-loading>i:nth-child(1) {

    animation-delay: 0

}



.ajax-loading>i:nth-child(2) {

    animation-delay: 90ms

}



.ajax-loading>i:nth-child(3) {

    animation-delay: .18s

}



.ajax-loading>i:nth-child(4) {

    animation-delay: .27s

}



@keyframes ajax-loading {

    0% {

        transform: scale(1)

    }

    20% {

        transform: scale(1, 2.2)

    }

    40% {

        transform: scale(1)

    }

}



.alert-danger {

    color: #721c24;

    background-color: #f8d7da;

    border-color: #f5c6cb;

    position: relative;

    padding: .75rem 1.25rem;

    margin-bottom: 1rem;

    border: 1px solid transparent;

    border-radius: .25rem;

}

#iframe-wrap .alert-danger {
    padding: 10px;
    display: flex;
    text-align: left;
}

#iframe-wrap .alert-danger svg.alert-triangle {
    margin-right: 10px;
    width: 25px;
    height: 25px;
}
#iframe-wrap .alert-danger p{
    font-size: 14px;
}

.alert-danger p {

    padding: 0;

    margin: 0;

    display: inline-block;

}



.alert-danger svg.alert-triangle {

    display: inline-block;

    vertical-align: text-bottom;

    margin-right: 5px;

    width: 20px;

    height: 20px;

}





/* form styling --  17/1/2020 */





/* 

.sample-two .form-group.row {

    display: flex;

    margin-bottom: 15px;

    background: #E5E5E5 !important;

    border-radius: 8px !important;

}



.sample-two .form-group label {

    color: #212529;

    width: 40%;

    padding: 7px 15px 0;

}



.sample-two .form-group .col-sm-8 {

    width: 60%;

}



.sample-two .form-group iframe {

    width: 100% !important;

}



.sample-three #wrapper {

    display: flex;

    background-color: #779ff2;

    height: 40px;

    align-items: center;

}



.sample-three #wrapper iframe {

    width: 100% !important;

}



.sample-three #wrapper iframe#fields-card-number {

    width: 566px !important;

}



.sample-one .row:last-child {

    display: flex;

}



.sample-one .row:last-child iframe {

    width: 30% !important;

} */





/* .sample-three .form-control::-webkit-input-placeholder {

    color: pink;

} */



.auForm select {

    margin: 0 10px 25px 0;

    min-width: 120px;

    height: 30px;

    border-radius: 5px;

}



.auWrap {

    display: none;

}



.auWrap p {

    font-weight: 600;

}



.text-center {

    text-align: center;

}



.addCard {

    margin-top: 30px;

}



@media (min-width: 1200px) {

    .woocommerce-MyAccount-content table td {

        min-width: 140px;

    }

}



@media (max-width: 768px) {

    #saferpay-div {

        padding: 15px 0px !important;

    }

    .sample-two .form-group label {

        padding: 8px 6px 0;

        line-height: 20px;

    }

    .sample-one .row:last-child iframe {

        width: 50% !important;

    }

    #payment .payment_methods li .payment_box,

    #payment .payment_methods>li .payment_box,

    #payment .place-order {

        padding: 0 !important;

    }

    .sample-four-input-wrap {

        flex-wrap: wrap;

    }

    .sample-four-input-wrap .form-group:nth-child(1) {

        width: 100%;

    }

    .sample-four-input-wrap .form-group:nth-child(2),

    .sample-four-input-wrap .form-group:nth-child(3) {

        width: 48%;

    }

    .sample-three #wrapper {

        display: block !important;

        height: auto !important;

    }

    #saferpay-div.sample-one .row:last-child iframe {

        width: 40% !important;

    }

    #saferpay-div.sample-two .form-group label {

        width: 25%;

        padding: 7px 5px 0;

        word-break: break-word;

    }

    #saferpay-div.sample-two .form-group .col-sm-8 {

        width: 75%;

    }

}





/* 03/02/20*/



@media only screen and (min-width: 769px) {

    .wc_payment_method.payment_method_spgw_credit_card .payment_method_spgw_credit_card #wrapper .col-7 {

        width: 58%;

    }

    .wc_payment_method.payment_method_spgw_credit_card .payment_method_spgw_credit_card #wrapper .col-3 {

        width: 25%;

    }

    .wc_payment_method.payment_method_spgw_credit_card .payment_method_spgw_credit_card #wrapper .col-2 {

        width: 16%;

    }

}



@media(min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    #saferpay-div.sample-three #wrapper iframe#fields-card-number {

        width: 670px !important;

    }

    .wc_payment_method.payment_method_spgw_credit_card .payment_method_spgw_credit_card #wrapper .col-2 {

        width: 20%;

    }

    #saferpay-div.sample-two {

        padding: 36px 10px;

    }

}



.input-group .logo {

    right: 2em;

}





.sample-three #wrapper {

    position: relative;

    margin-bottom: 40px;

}

.sample-three #card-number-help{

    position: absolute;

    bottom: auto;

    top: 40px;

    font-size: 14px;

}

.sample-three #expiration-help {

    position: absolute;

    bottom: auto;

    top: 40px;

    font-size: 14px;

}

.sample-three #cvc-help {

    position: absolute;

    bottom: auto;

    top: 40px;

    font-size: 14px;

}

#expiration-help,

#cvc-help,

#card-number-help,

#holder-name-help{

    font-size: 14px;

    line-height: 16px;

    color: #e2401c;

}

.sample-one #expiration-help{

    position: absolute;

    bottom: 0;

    font-size: 14px;

    left: 22px;

}

.payment_box.payment_method_spgw_credit_card input#fields-card-number {

    padding-left: .75rem;

}

#saferpay-div.sample-two input{

    width: 100%;

    border: solid 1px #CFCFCF;

    border-radius: 8px;

    padding-right: calc(1.5em + .75rem);

    padding: .375rem .75rem;

    max-width: 100%;

    box-shadow: none;

    max-width: 100%;

    height: 100%;

}

#saferpay-div.sample-three input{

    color: #fff;

    padding-right: calc(1.5em + .75rem);

    padding: .375rem .75rem;

    font-size: 1rem;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    background: transparent;

    box-shadow: none;

    max-width: 100%;

    height: 100%;

}

#saferpay-div.sample-three input::-webkit-input-placeholder { /* Edge */

    color: #fff;

    font-size: 19px;

     opacity: 0.5;

  }

  

  #saferpay-div.sample-three input:-ms-input-placeholder { /* Internet Explorer 10-11 */

    color: #fff;

    font-size: 19px;

     opacity: 0.5;

}

  

#saferpay-div.sample-three input::placeholder {

    color: #fff;

    font-size: 19px;

     opacity: 0.5;

}

#saferpay-div.sample-four input{

    display: block;

    width: 100%;

    height: 100%!important;

    padding: .375rem .75rem;

    font-size: 1rem;

    color: #495057;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: .25rem;

    background-color: #fff;

    padding-left: .75rem;

}

#saferpay-div.sample-one input{

    display: block;

    width: 100%;

    height: 100%!important;

    padding: .375rem .75rem;

    font-size: 1rem;

    color: #495057;

    background-clip: padding-box;

    border-bottom: 1px solid #ced4da;

    border-radius: 0;

    background-color: #fff;

    padding-left: .75rem;

}

#saferpay-div.sample-four input::-webkit-input-placeholder,

#saferpay-div.sample-one input::-webkit-input-placeholder,

#saferpay-div.sample-two input::-webkit-input-placeholder { /* Edge */

    color: #6d6d6d;

    font-size: 18px;



  }

  #saferpay-div.sample-four input::-ms-input-placeholder,

  #saferpay-div.sample-one input::-ms-input-placeholder,

  #saferpay-div.sample-two input::-ms-input-placeholder { /* Internet Explorer 10-11 */

    color: #6d6d6d;

    font-size: 18px;



}

  

#saferpay-div.sample-four input::placeholder,

#saferpay-div.sample-one input::placeholder,

#saferpay-div.sample-two input::placeholder {

    color: #6d6d6d;

    font-size: 18px;



}

.sample-three #wrapper .col-3{

    position: relative;

}

.woocommerce-MyAccount-content .sample-one .row:last-child {
    position: relative;
}

.woocommerce-MyAccount-content .sample-one #expiration-help {
    position: absolute;
    bottom: -16px;
    font-size: 14px;
    left: 0;
}

/* .payment_methods.methods #saferpay-div.sample-four  iframe#fields-card-number {
    margin-left: -52px;
} */
/* #fields-card-number {
    padding-left: 0;
} */


/* jquery-ui plugin styles overrided */
.sfwp-popup .ui-widget-content {
    background: #fff !important;
    color: #333333;
    border: none !important;
    border-radius: 0 !important; 
}
.sfwp-popup .ui-widget-header {
    border: none !important;
    background: none !important;
    font-weight: normal;
    color: inherit !important;
    border-radius: 0 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none !important;
    background: #fff !important;
    font-weight: normal;
    color: inherit !important;
    border-radius: 0 !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: none !important;
    font-weight: bold;
    color: inherit !important;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: none !important;
}
@media only screen and (max-width: 812px) and (min-width: 768px) and (orientation: landscape) {

    .sample-three #card-number-help {

        bottom: auto;

        top: 40px;

    }

    .sample-three #expiration-help {

        bottom: auto;

        top: 40px;

    }

    .sample-three #wrapper{

        margin-bottom: 35px;

    }

}

@media only screen and (max-width: 768px) {

    .sample-three #wrapper .col-7.px-0,

    .sample-three #wrapper .col-3.px-0,

    .sample-three #wrapper .col-2.px-0{

        position: relative;

        margin-bottom: 15px;

    }

    .sample-three #card-number-help,

    .sample-three #expiration-help,

    .sample-three #cvc-help{

        position: absolute;

        bottom: -15px;

        font-size: 14px;

        line-height: 16px;

        left: 12px;

        top: auto;

    }

    .sample-three #wrapper {

        padding: 10px 0;

    }

    .sample-one #expiration-help {

        position: absolute;

        bottom: -8px;

        font-size: 14px;

        left: 0;

    }

    .sample-one #expiration-help {
        bottom: 1px;
    }

    section.woocommerce-order-details{
        overflow-x: auto;
    }

    table.order_details{
        overflow-x: scroll;
    }

}
.addCard {

    margin-bottom: 30px;

}
.woocommerce-MyAccount-content{
    overflow-x: auto;
}
@media (min-width: 1200px){
    .woocommerce-MyAccount-content table td {
        min-width: 0px;
    }
}
#saferpay-div {

    padding: 20px 0px !important;

}
.woocommerce-MyAccount-content #sfwp-cardtype{
    border: 1px solid #cdcdcd;
    background-color: #fff;
    width: 15.5em;
    max-width: 100%;
    display: block;
    text-decoration: none;
    padding: 7px 7px 5px;
    line-height: 1;
    cursor: pointer;
    padding-right: calc(10px + .7em + .7em);
    font-size: 14px;
}
select:focus-visible{
    outline-color: #96588a;
}