div#payu-secure-form, div#payu-secure-form .payu-secure-wrapper span.payu-secure-form_field {
color: #222;
border:2px solid #ddd;
font-size: 14px;
border-radius:28px;
padding:8px 16px;
background: #fff;
}
div#payu-secure-form{
padding: 16px 24px 14px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);grid-gap: 10px;
}
div#payu-secure-form .payu-secure-wrapper span.payu-secure-form_field-heading{
font-weight: 600;
}
div#payu-secure-form .payu-secure-number_wrapper{
grid-area:1/1/2/3;
}
div#payu-secure-form .payu-secure-date_wrapper{
grid-area:2/1/3/2;
}
div#payu-secure-form .payu-secure-cvv_wrapper{
grid-area:2/2/3/3;
}
div#payu-secure-form .payu-secure-wrapper{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
div#payu-secure-form .payu-secure-wrapper span{
width:100%;
}
.payu-secure-messages_wrapper{
grid-area: 3/1/3/3;
font-weight: bold;
color: #c80000;
}
p.payu-secure-error{
animation-name: payuErrorBlink;
animation-duration: 0.5s;
animation-iteration-count: 6;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes payuErrorBlink {
0% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}