#ux-app .box-payment {
    font-weight: bold;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 83rem;
    margin: 0 auto;
    border: 1px solid #cbc4bc;
    padding: 0.7rem;
    border-radius: 13px;
}
#ux-app .box-payment p {padding:0px;}

.payment-methods-strip i {font-size: 1.8rem;margin: 0 3px;}




#card-element {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    
}


.succeded {
    color:green;
}
#card-errors {
    color: red;
    margin-top: 10px;
    font-size: var(--font-size-app-elements);
    font-weight: bold;
}

.spinner, .spinner:before, .spinner:after {
    border-radius: 50%;
}
.hidden {
    display: none;
}

.spinner, .spinner:before, .spinner:after {
    border-radius: 50%;
}

.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}



.spinner:before, .spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #6772e5;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}

.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #6772e5;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


#payment-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
    max-width: 640px;

}

.security-info {
    display: flex;
    align-items: center;
    gap:20px; 
}

.paystripe {
    background-color: #6772e5;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 12px;
    width: 100%;
    cursor: pointer;
    /*transition: background-color 0.3s ease;*/
}

.paystripe:hover {
    background-color: #5469d4;
}