#payment * { box-sizing: border-box; }
#payment { max-width:900px;  color:#333; box-shadow:0px 0px 15px rgba(0,0,0,.25); padding:15px; margin: auto; background-color: #fff;}
#payment.end { padding: 50px;}
#payment.end table { font-size: 14px;}
#payment h2 { color:#333; font-weight:400; text-align: center; }

#payment .step { display:none;}
#payment .step.active { display:block;}
#payment .step h3 { margin-top:0; margin-bottom:20px; color:#333; font-weight:400; font-size: 16px;}
#payment .steps ul { margin:0; padding:0; list-style:none; font-size:0; }
#payment .steps ul li { display:inline-block; vertical-align:middle; width:33.33%; text-align:center; opacity:.3;  }
#payment .steps ul li.active { opacity:1; }
#payment .steps ul li h2 { font-size:14px; color:#333; display:inline-block; margin-left:10px;}
#payment .steps ul li span { border-radius:100px; width:30px; height:30px; border:#333 solid 1px; display:inline-block; font-size:16px; line-height:27px; text-align:center; color:#1c3564;}
#payment .steps ul li.active span { background-color: #333; color: #fff; }
#payment form input { width:100%; color:#1c3564; height:30px; borde-radius:3px; border:#bebebe solid 1px; border-radius: 3px;}
#payment .row { font-size:0;}
#payment .row .col { font-size:12px; display:inline-block; }
#payment .row .col.full { width: 100%;}
#payment .row .col.aright { text-align: right;}
#payment .row.c2 .col { width:50%;  }
#payment .row.c2 .col.aleft{ text-align:left; }
#payment .row.c2 .col.aright{ text-align:right; }
#payment .row.c2 .col:first-child { padding-right:5px; }
#payment .row.c2 .col:last-child { padding-left:5px; }
#payment .row.c3 .col { width:33.33%;  }
#payment .row.c3 .col:nth-child(2){ padding-right:10px; padding-left:10px; }

#payment .row.c7x3 > .col { vertical-align:middle;}
#payment .row.c7x3 > .col:first-child { width:60%;  }
#payment .row.c7x3 > .col:last-child { width:40%;  }

#payment form { background:#fff; padding:25px; padding-top:25px; }
#payment form .field { margin-bottom:20px; position:relative; }
#payment form input { height:40px; text-indent:10px; font-size: 16px; color: #000;}
#payment form input.error { border:#e74c3c solid 1px;}
#payment form p.small { font-size: 12px; margin: 0; margin-top: 0px;font-weight: 400; color: #3498db;}
#payment #error { background-color:#e74c3c; color:#fff; padding:6px 6px; display:none; border-radius:3px; }
#payment #loading { display:none; padding-top:10px; padding-bottom:10px; }
#payment #error p { text-align:center; margin:0;}

#payment #success { background-color:#27ae60; color:#fff; padding:6px 6px; padding-top: 15px;border-radius:3px; }
#payment #success p { text-align:center; margin:0; color: #fff; padding: 25px; padding-top: 0px; font-size: 18px;}

#payment #rerror { background-color:#e74c3c; color:#fff; padding:6px 6px; padding-top: 15px;border-radius:3px; }
#payment #rerror p { text-align:center; margin:0; color: #fff; padding: 25px; padding-top: 0px; font-size: 18px;}



#payment form a { text-decoration:none;}
#payment form a.btn { display:inline-block; width:50%; background-color:#27ae60; color:#fff; letter-spacing:1px; text-align:center; padding-top:10px; padding-bottom:10px; margin-top:25px; border-radius: 3px;}
#payment form a.btn.disabled { background-color:#e4e4e4; color:#ccc; cursor:default;}
#payment form a.btn.working { background-color:#e4e4e4; color:#666; padding-left:15px; padding-right:15px; width:auto; }
#payment a.help { position: absolute;
    right: 7px;
    top: 8px;
    width: 22px;
    height: 22px;
    display: block;
    color: #f6f7fa;
    border: #ccc solid 1px;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #ccc !important;
    font-weight: bold;
}
#payment div.tooltip { position: absolute;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    width: 205px;
    padding: 10px;
    top: 92%;
    right: 0;
    text-align: center;
    z-index: 10;
    border-radius: 6px;display:none;}
#payment div.tooltip h2 { font-size:13px !important; margin:0px !important; margin-bottom:10px; margin-top:10px;}
#payment div.tooltip p { color:#666 !important; margin-bottom:0px;}





@media only screen and (max-width: 640px) {
  #payment .row.c7x3 > .col { width: 100% !important;}
  #payment .row.c7x3 > .col.right { text-align: center;}
  #payment .row.c7x3 > .col.right img { max-width: 80%; margin: auto; }
}