.container {
display: flex;
align-items: center;
flex-direction: column;
}
.card {
background: white;
padding: 20px 30px;
top: -30px;
width: 100%;
max-width: 300px;
border-radius: 12px;
box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.columns {
display: flex;
}
.columns > * {
margin-right: 15px;
}
.field {
height: 40px;
border-bottom: 1px solid lightgray;
}
.field.is-onfocus {
border-color: black;
}
.field.is-empty {
border-color: orange;
}
.field.is-invalid {
border-color: red;
}
.field.is-valid {
border-color: green;
}
#card-pan {
margin-bottom: 30px;
}
.submit {
background: green;
cursor: pointer;
width: 200px;
margin-top:30px;
color: white;
outline: 0;
font-size: 14px;
border: 0;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 15px 0;
transition: background 0.3s ease;
margin-right:20px;
}
.clear {
background: green;
cursor: pointer;
width: 100px;
margin-top:30px;
color: white;
outline: 0;
font-size: 14px;
border: 0;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 15px 0;
transition: background 0.3s ease;
}
.buttons {
display: flex;
}
.info {
width: 600px;
word-wrap:break-word;
margin-top: 20px;
color: green;
}