@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
html{height: 100%;}
body{margin: 0;font-family: "Inter", sans-serif;}
img {
    max-width: 100%;
}
*{box-sizing: border-box;}

.mai {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .count h3 {
      color: red;
      font-weight: 700;
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
  }
  .count {
    text-align: center;
}

/* .mbdy{
    background: #1D3F7C;
} */
.main {
    display: flex;
    justify-content: space-between;
    height:100%;
    
}
.lft-cl {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: end;
    padding:10rem;
    align-items: center;
    box-sizing: border-box;
    background: #1D3F7C;
}
.bdy {
    display: flex;
    align-items: center;
    height: 100%;
    width: 50%;
    padding: 80px;
    background-color: #fff;
    overflow: auto;
}
.usa-bdy h4 {
    color: #fff;
    opacity: 0.7;
    font-weight: normal;
}
.usa-bdy h2 {
    font-size: 2.75rem;
    color: #fff;
    font-weight: normal;
    margin: 0 0 2rem;
}
.links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    align-items: center;
    justify-content: center;
}
.links ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    font-size: 0.75rem;
    opacity: 0.5;
    padding: 0 22px 0;
    border-right: 1px solid #fff;
    display: block;
}
.links ul li:first-child a {
    padding-left: 0;
}
.links ul li:last-child a {
    border-right:none;
}
.lft-cl p {
    color: #fff;
    font-weight: normal;
    margin: 8px 0 30px;
}
#frmStripePayment {
    max-width: 18.75rem;
    padding: 1.563rem;
    border: #D0D0D0 1px solid;
    border-radius: 4px;
}
.smll-img {
    width: 2.25rem;
}
.imgcol {
    width: 18.75rem;
    height: auto;
    margin: 0 0 6.25rem;
   
}
.imgcol img{
border-radius: 0.375rem;
}
.test-data {
    margin-top: 2.5rem;
}

.tutorial-table {
    border: #D0D0D0 1px solid;
    font-size: 0.8em;
    color: #4e4e4e;
}

.tutorial-table th {
    background: #efefef;
    padding: 0.75rem;
    border-bottom: #e0e0e0 1px solid;
    text-align: left;
}

.tutorial-table td {
    padding: 12px;
    border-bottom: #D0D0D0 1px solid;
}

#frmStripePayment .field-row {
    margin-bottom: 0.047rem;
}

#frmStripePayment div label {
    margin: 0.313rem 0 0 0.313rem;
    color: #49615d;
    width: auto;
}

.demoInputBox {
    padding: 0.625rem;
    border: #d0d0d0 1px solid;
    border-radius: 0.25rem;
    background-color: #FFF;
    width: 100%;
    margin-top: 0.313rem;
    box-sizing:border-box;
}

.demoSelectBox {
    padding: 0.625rem;
    border: #d0d0d0 1px solid;
    border-radius: 0.25rem;
    background-color: #FFF;
    margin-top: 0.313rem;
}

select.demoSelectBox {
    height: 2.188rem;
    margin-right: 0.625rem;
}

.error {
    background-color: #FF6600;
    padding: 0.5rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.success {
    background-color: #c3c791;
    padding: 0.5rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.info {
    font-size: .8em;
    color: #FF6600;
    letter-spacing: 0.125rem;
    padding-left: 0.313rem;
}

/* .btnAction {
    padding: 0.5rem 1.813rem;
    color: 316230;
    border: #74e376 1px solid;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    width: 100%;
    background: #18A601;
    color: #fff;
} */

.btnAction:focus {
    outline: none;
}

.column-right {
    margin-right: 0.375rem;
}

.contact-row {
    display: inline-block;
}

.cvv-input {
    width: 3.75rem;
}

#error-message {
    margin: 0 0 0.625rem 0;
    padding: 0.313rem 1.563rem;
    border-radius: 0.25rem;
    line-height: 1.563rem;
    font-size: 0.9em;
    color: #ca3e3e;
    border: #ca3e3e 1px solid;
    display: none;
    width: 18.75rem;
}

#success-message {
    margin: 0 0 0.625rem 0;
    padding: 0.313rem 1.563rem;
    border-radius: 0.25rem;
    line-height: 1.563rem;
    font-size: 0.9em;
    color: #3da55d;
    border: #43b567 1px solid;
    width: 18.75rem;
}

.display-none {
    display:none;
}

#response-container {
    padding: 2.5rem 1.25rem;
    width: 16.875rem;
    text-align:center;
}


.ack-message {
    font-size: 1.5em;
    margin-bottom: 1.25rem;
}

#response-container.success {
    border-top: #b0dad3 2px solid;
    background: #e9fdfa;
}

#response-container.error {
    border-top: #c3b4b4 2px solid;
    background: #f5e3e3;
}

.img-response {
    margin-bottom: 1.875rem;
}

#loader {
    display: none;
}

#loader img {
    width: 2.813rem;
    vertical-align: middle;
}
/* .phppot-container {
    padding: 2.5rem 0;
    width: 380px;
    border-radius: 0.313rem;
} */
.phppot-container h1 {
    margin: 0;
    text-align: left;
    font-weight: normal;
    font-size: 1.25rem;
    color: hsla(0,0%,10%,.9);
    font-weight: 700;
}
#payment-box input {
    width: 100%;
    padding: 0.5rem 2rem;
    border-bottom:1px solid #dddddd;
    border-radius: 0;
    background: #fff;
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 0.813rem;
    color: #1a1a1ab3;
}
#payment-box .card-info input {
    padding: 0.5rem 1rem;
}
#payment-box .billing_adress input {
    padding: 0.5rem 1.375rem;
    /*border-right: 1px solid #dddddd;*/
}
.card-info .comm{margin-bottom: 0.875rem;}
#payment-box .billing_adress .dflex .row:first-child input {
    border-right: 1px solid #dddddd;
}
span#address2-error {
    display: none;
}
.comm #card-element{
    border-bottom:1px solid #dddddd;
    border-top: none;
    border-left: none;
    border-right: none;}

.phppot-container .row {
    margin-bottom: 0;
    position: relative;
}
.font-icon {
    position: absolute;
    top: 6px;
    left: 4px;
    text-align: left;
    width: 10px !important;
}

#payment-box .label {
    font-size: 1rem;
}

div#card-element{
    width: 100%;
    padding: 0.5rem 1.375rem;
    border: 1px solid #bdbdbd;
    border-radius: 0.188rem;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.font-icon i {
    color: #1a1a1ab3;
    font-size: 0.813rem;
}
.error-msg {
    color: red;
    font-size: 0.688rem;
    margin: 0 0 0 10px;
    font-size: 13px;
    padding: 10px 0;
    display: none;
    text-align: left;
}
input#form12 {
    display: none;
}
#payment-box .name-on-card input#customer_name {
    padding: 0.5rem 1.375rem;
}
.phppot-container .row:last-child {
    margin-bottom: 0;
}
#card-error {
    color: red;
    font-size: 0.875rem;
}
#payment-box h5 {
    margin-bottom: 0.438rem;
    font-weight: normal;
    color: #1a1a1ab3;
    font-size: 1rem;
    text-align: center;
    margin-top: 0.75rem;
    position: relative;
    background-color: #fff;
    z-index: 9;
}

.comm {
    padding: 0;
    background: #fff;
    box-shadow:0 0 0 1px #e0e0e0, 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%);
    border-radius: 0.625rem;
    margin-bottom: 1.875rem;
    overflow: hidden;
}
.dflex {
    display: flex;
}
.dflex .row {
    width: 50%;
}

#payment-box h4 {
    margin-bottom: 0.438rem;
    color: #000000b3;
    font-size: 0.813rem;
    text-align: left;
    font-weight: 800;
}
.label-div h4 {
    margin-bottom: 0.438rem;
}
select#country-list, #state_list {
    width: 100%;
    padding: 0.5rem 3.375rem 0.5rem 1.375rem;
    border: 1px solid #ccc;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    color: #1a1a1ab3;
    appearance: none;
}
.imgcol.mobile{display: none;}
svg.InlineSVG.Icon.Select-arrow.Icon--sm {
    height: 13px;
    margin-top: -6px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    width: 15px;
}


.success {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background:none;
}

.checkout-footer {
    text-align: center;
    color: #888;
    margin: 20px 0 10px 0;
    padding: 20px 0 20px 0;
    clear: both;
}
.bdy{padding-left: 20px;}

.small-info {
    font-size: .8em;
    color: #565656;
}

h1 {
    margin: 0 0 10px 0;
    font-weight: 500;
    font-size: 1.7em;
}

#site-logo {
    vertical-align: middle;
    padding: 12px 8px 12px 0px;
}
.success i {
    color: #74e376;
    font-size: 63px;
    line-height: 106px;
}
.success p {
    padding: 0px;
    margin: 0px 0 8px;
}
.cl{border-radius:100px; height:100px; width:100px; background: #f2fbe4; margin:0 auto; display: flex;align-items: center; justify-content: center;}
.success h2 {
    color: #74e376;
    font-weight:normal;
    font-size: 30px;
    font-weight: bold;
}
.success h4 {
    font-size: 1rem;
    font-weight:bold;
    
}
table tr td{border:1px solid #ccc; padding:10px;border-collapse: collapse; border-collapse: separate;}
table.table.table-striped {
    margin: 0 auto;
}
.success td {font-size:14px;}
@media only screen and (max-width:1400px){
.bdy {
    display: flex;
    align-items: baseline;
}
}
@media all and (max-width: 780px) {
    .phppot-container {
        width: auto;
    }
}

@media all and (max-width: 510px) {
    
    .bdy{display:block;}
.over-flw {
    overflow-y: hidden;
    width: 100%;
}
    .success td{display: table-cell;overflow-y: hidden;}
    .links ul li:last-child a {
        border-right: none;
        padding-right: 0;
    }
}
@media all and (max-width: 400px) {
    body{margin:0px;}
    .phppot-container {
        padding: 0;
    }
    .bdy {
        padding: 30px 20px;

    }
    .phppot-container h1 {
        font-size: 1.2em;
    }
    
}