.mollie-components {
display: flex;
flex-wrap: wrap;
}
.mollie-components .mollie-component-label {
font-weight: 400;
}
.mollie-components .mollie-component {
width: 100%;
min-height: 34px;
background-color: #FFF;
border-radius: 6px;
color: #222;
transition: all 0.05s ease;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
}
.mollie-components .mollie-component iframe {
border-radius: 6px;
margin: 0;
}
.mollie-components .mollie-component.is-invalid {
box-shadow: 0px 1px 1px 0px rgba(255, 51, 68, 0.1), 0px 1px 3px 0px rgba(255, 51, 68, 0.1);
border-color: #fff0f0;
}
.mollie-components .mollie-component.has-focus {
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
border-color: #07f;
}
.mollie-components div {
flex-grow: 1;
width: 100%;
}
.mollie-components div + div {
display: block;
margin-top: 0.63em;
}
.mollie-components #expiryDate,
.mollie-components #verificationCode {
max-width: 50%;
box-sizing: border-box;
}
.mollie-components #expiryDate {
padding-right: 5%;
}
.mollie-components #verificationCode {
padding-left: 5%;
}
.mollie-components-description svg {
display: inline;
}