.radioList { display: flex; flex-wrap: wrap; }
.radioList label { display: flex; align-items: center; padding: 8px 14px; border: 1px solid #dcdcdc; border-radius: 4px; cursor: pointer; transition: 0.5s ease; background: #fff; font-size: 14px; margin-right: 15px; }
.radioList input[type="radio"] { opacity: 0; width: 0; accent-color: #4AA352; }
.radioList label:hover { border-color: #4AA352; background-color: #f8f9fa; }
.radioList input[type="radio"]:checked + label,
.radioList label:has(input[type="radio"]:checked) { border-color: #4AA352; background-color: #4AA352; color: #fff; }


button.send { outline: 0; width: 100%; border: 1px solid #4AA352; color: #fff; border-radius: 4px; padding: 15px 80px; background: #4AA352; position: relative; overflow: hidden; line-height: 18px; }
button.send .text.active { transform: translateY(-350%) scale(0); transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64); }
button.send.active { outline: 0; padding: 0px 80px; transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); border: 1px solid #4BB543; background: #4BB543; }
button.send .loader { position: absolute; width: calc(0% - 4px); height: calc(100% - 4px); background-color: #fff; left: 2px; top: 2px; border-radius: 0px; }
button.send .loader.active { width: calc(100% - 4px); transition: 1.3s ease-in-out; transition-delay: 0.5s; }
button.send .done { color: #4BB543; margin-top: -20px; transform: translateY(300%) scale(0); }
button.send .done.active { transform: translateY(0%) scale(1); transition: 0.4s cubic-bezier(0.34, -0.61, 1, 0.64); }
button.send.finished { padding: 15px 80px; transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); }
button.send.finishedred { padding: 15px 80px; transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); border: 1px solid #E89548; background: #E89548; }
button.send.finishedred .done { color: #E89548; }



.form-container .field-container:first-of-type { grid-area: name; }
.form-container .field-container:nth-of-type(2) { grid-area: number; }
.form-container .field-container:nth-of-type(3) { grid-area: expiration; }
.form-container .field-container:nth-of-type(4) { grid-area: security; }
.field-container input { -webkit-box-sizing: border-box; box-sizing: border-box; }
.field-container { position: relative; }
.form-container { display: grid; grid-column-gap: 10px; grid-template-columns: auto auto; grid-template-rows: 90px 90px 90px; grid-template-areas: "name name""number number""expiration security"; max-width: 400px; padding: 20px; color: #707070; }
.field-container label { padding-bottom: 5px; font-size: 13px; }
.field-container input { margin-top: 3px; padding: 15px; font-size: 16px; width: 100%; border-radius: 3px; border: 1px solid #dcdcdc; }
.ccicon { height: 38px; position: absolute; right: 6px; top: calc(50% - 1px); width: 60px; }

/* CREDIT CARD IMAGE STYLING */
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }
.card-container { width: 100%; /*max-width: 400px;*/ max-height: 260px; height: 54vw; /*padding: 20px;*/ margin:15px 0; display:flex; justify-content:center; }
#ccsingle { position: absolute; right: 15px; top: 20px; }
#ccsingle svg { width: 100px; max-height: 60px; }
.creditcard svg#cardfront,
.creditcard svg#cardback { width: 100%; -webkit-box-shadow: 1px 5px 6px 0px black; box-shadow: 1px 5px 6px 0px black; border-radius: 22px; }
#generatecard { cursor: pointer; float: right; font-size: 12px; color: #fff; padding: 2px 4px; background-color: #909090; border-radius: 4px; cursor: pointer; float: right; }

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor { -webkit-transition: fill .5s; transition: fill .5s; }
.creditcard .lightblue { fill: #03A9F4; }
.creditcard .lightbluedark { fill: #0288D1; }
.creditcard .red { fill: #ef5350; }
.creditcard .reddark { fill: #d32f2f; }
.creditcard .purple { fill: #ab47bc; }
.creditcard .purpledark { fill: #7b1fa2; }
.creditcard .cyan { fill: #26c6da; }
.creditcard .cyandark { fill: #0097a7; }
.creditcard .green { fill: #66bb6a; }
.creditcard .greendark { fill: #388e3c; }
.creditcard .lime { fill: #d4e157; }
.creditcard .limedark { fill: #afb42b; }
.creditcard .yellow { fill: #ffeb3b; }
.creditcard .yellowdark { fill: #f9a825; }
.creditcard .orange { fill: #ff9800; }
.creditcard .orangedark { fill: #ef6c00; }
.creditcard .grey { fill: #bdbdbd; }
.creditcard .greydark { fill: #616161; }

/* FRONT OF CARD */
#svgname { text-transform: uppercase; }
#cardfront .st2 { fill: #FFFFFF; }
#cardfront .st3 { font-family: 'Source Code Pro', monospace; font-weight: 600; }
#cardfront .st4 { font-size: 54.7817px; }
#cardfront .st5 { font-family: 'Source Code Pro', monospace; font-weight: 400; }
#cardfront .st6 { font-size: 33.1112px; }
#cardfront .st7 { opacity: 0.6; fill: #FFFFFF; }
#cardfront .st8 { font-size: 24px; }
#cardfront .st9 { font-size: 36.5498px; }
#cardfront .st10 { font-family: 'Source Code Pro', monospace; font-weight: 300; }
#cardfront .st11 { font-size: 16.1716px; }
#cardfront .st12 { fill: #4C4C4C; }

/* BACK OF CARD */
#cardback .st0 { fill: none; stroke: #0F0F0F; stroke-miterlimit: 10; }
#cardback .st2 { fill: #111111; }
#cardback .st3 { fill: #F2F2F2; }
#cardback .st4 { fill: #D8D2DB; }
#cardback .st5 { fill: #C4C4C4; }
#cardback .st6 { font-family: 'Source Code Pro', monospace; font-weight: 400; }
#cardback .st7 { font-size: 27px; }
#cardback .st8 { opacity: 0.6; }
#cardback .st9 { fill: #FFFFFF; }
#cardback .st10 { font-size: 24px; }
#cardback .st11 { fill: #EAEAEA; }
#cardback .st12 { font-family: 'Rock Salt', cursive; }
#cardback .st13 { font-size: 37.769px; }

/* FLIP ANIMATION */
.card-container { perspective: 1000px; }
.creditcard { width: 100%; max-width: 400px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: -webkit-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; cursor: pointer; }
.creditcard .front,
.creditcard .back { position: absolute; width: 100%; max-width: 400px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; color: #47525d; }
.creditcard .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.creditcard.flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }