#wc-moneticoonline-cc-wrapper {
justify-content: center;
display: flex;
}
#wc-moneticoonline-cc-form {
max-width: 500px;
}
#wc-moneticoonline-cc-form fieldset {
border: none;
}
#wc-moneticoonline-cc-form fieldset div:has(input) {
height: 50px;
padding: 4px;
font-size: 17px;
}
#wc-moneticoonline-cc-form #card-exp-date #hostedfield {
text-align: center;
}
#MoneticoOnline-modal .modal-content {
display: flex;
justify-content: center;
}
.MoneticoOnline-payment-form-error {
margin-left: 7px;
margin-right: 7px;
}
#MoneticoOnline-modal-wrapper a {
text-decoration: none;
padding: 15px;
background-color: white;
border-radius: 5px;
text-transform: uppercase;
color: black;
}
#MoneticoOnline-modal.modal {
z-index: 1050;
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
body:has(.modal.modal-visible) {
overflow: hidden;
}
#MoneticoOnline-modal.modal.modal-visible {
visibility: visible;
opacity: 1;
overflow-x: hidden;
overflow-y: auto;
}
#MoneticoOnline-modal .modal-body {
align-content: center;
width: 800px;
max-width: 90%;
height: 800px;
max-height: 90%;
position: relative;
top: 50px;
border-radius: 4px;
background: white;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
#MoneticoOnline-modal .modal-body .loader {
display: block;
width: 56px;
height: 56px;
border-radius: 50%;
border: 9px solid #f39517;
animation: mp-spinner-animation-1 0.8s infinite linear alternate,
mp-spinner-animation-2 1.6s infinite linear;
}
#MoneticoOnline-modal iframe,
#MoneticoOnline-modal iframe iframe
{
border: none;
}
#MoneticoOnline-modal iframe body
{
display: flex;
justify-content: center;
}
#MoneticoOnline-modal .modal-charging {
display: flex;
justify-content: center;
}
#wc-moneticoonline-cc-form #MoneticoOnline-payment-form-button,
#wc-moneticoonline-cc-form #MoneticoOnline-payment-form-button .wc-block-checkout__actions_row {
padding: 4px;
}
#wc-moneticoonline-cc-form #btn-to-open-modal {
width: 100%
}
#MoneticoOnline-modal.modal-dialog {
position: relative;
width: auto;
}
@keyframes mp-spinner-animation-1 {
0% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
}
50% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
62.5% {
clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
75% {
clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
}
100% {
clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
}
}
@keyframes mp-spinner-animation-2 {
0% {
transform: scaleY(1) rotate(0deg);
}
49.99% {
transform: scaleY(1) rotate(135deg);
}
50% {
transform: scaleY(-1) rotate(0deg);
}
100% {
transform: scaleY(-1) rotate(-135deg);
}
}