.payments {
     width: 100%;
     margin: 20px 0;
     position: relative !important;
 }


 /* success button */

 .orderSuccess {
     animation-name: orderSuccessEx;
     animation-duration: 1s;
     animation-fill-mode: forwards;
     /*  width: 100px;*/
     position: relative;
     flex: 0 1 auto;
 }


 @keyframes orderSuccessEx {
     from {
         right: 0%;
     }

     to {
         right: 50%;
     }
 }

 .orderButtonDiv {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }


 .sample .pay_txt {
     flex: 0 1 auto;
     padding: 0px 0px 0px 0px;
     margin: 0px 0 0px 0px;
     width: 100%;

 }

 .icon-container {
     margin-bottom: 20px;
     padding: 7px 0;
     font-size: 24px;
 }

 .alert {
     padding: 20px;
     background-color: #f2dede;
     color: #a94442;
 }

 .sample {
     /*   background-color: #fff; */
 }

 .sample * {
     /*   font-family: Source Code Pro, Consolas, Menlo, monospace;*/
     font-size: 16px;
     font-weight: 500;
 }

 .sample .row {
     display: -ms-flexbox;
     display: flex;
     margin: 0 5px 10px;
 }

 .sample .field {
     position: relative;
     width: 100%;
     height: 50px;
     /*   margin: 0 10px;*/
 }

 .field span {
     width: 120px;
     text-align: right;
     margin-right: 30px;
 }

 .field span.brand {
     width: 30px;
 }

 .sample .field_address {
     position: relative;
     width: 100%;
     /*   margin: 0 10px;*/
 }

 .sample .field_address.half-width-r,
 .sample .field.half-width-r {
     width: 50%;
     margin-left: 5px;

 }

 .sample .field_address.half-width-l,
 .sample .field.half-width-l {
     width: 50%;
     margin-right: 5px;

 }

 .sample .field.quarter-width {
     width: calc(25% - 10px);
 }

 .sample .row_3,
 .sample .row_2 {
     display: flex;
     margin: 0 5px 10px;
 }

 @media screen and (max-width: 900px) {

     .sample .row_2 {
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;

     }

     .sample .field.half-width-r {
         width: 100%;
         /* margin-left: 0px;*/
         margin: 0px 0px 0px 0px;
         /*  float: right;*/
     }

     .sample .field.half-width-l {
         width: 100%;
         /*  margin-right: 0px;*/
         margin: 0px 0px 10px 0px;
         /*  float: left;*/
     }
 }

 @media screen and (max-width: 600px) {

     .sample .row_3 {
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;

     }

     .sample .field_address.half-width-r {
         width: 100%;
         /* margin-left: 0px;*/
         margin: 0px 0px 0px 0px;
         /*  float: right;*/
     }

     .sample .field_address.half-width-l {
         width: 100%;
         /*  margin-right: 0px;*/
         margin: 0px 0px 10px 0px;
         /*  float: left;*/
     }
 }

 .sample label {
     position: absolute;
     width: 100%;
     margin-left: 10px;
     bottom: 12px;
     color: #999999;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     transform-origin: 0 50%;
     cursor: text;
     pointer-events: none;
     transition-property: color, transform;
     transition-duration: 0.3s;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .sample .options {
     color: #999999;
     font-size: 10px;
 }

 .sample span {
     padding: 20px 10px 5px 10px;
     margin: 10px 0 0px 0px;
     width: 100%;

 }

 .sample .input {
     position: absolute;
     left: 0;
     bottom: 0;
     /* padding-bottom: 7px;*/
     color: #ffffff;
     /*   background-color: transparent;*/
     /* line-height: 40px;*/
     font-size: 16px;
     /*   height: 30px;*/
     /* padding-top: 20px;*/
     background-color: white;
     color: #333333;
     /*border: 1px solid #d9d9d9;*/
     transition-property: color, transform;
     transition-duration: 0.3s;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
     width: 100%;
     padding: 20px 10px 5px 10px;
     border: 1px solid #333;
     border-radius: 5px;
     margin: 10px 0 0px 0px;

 }

 textarea {
     resize: vertical;
     overflow: auto;
     color: #32325d;
     font-size: 16px;
     background-color: white;
     color: #333333;
     width: 100%;
     padding: 20px 10px 5px 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin: 10px 0 0px 0px;
 }

 .sample .input::-webkit-input-placeholder {
     color: transparent;
     transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .sample .input::-moz-placeholder {
     color: transparent;
     transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .sample .input:-ms-input-placeholder {
     color: transparent;
     transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .sample .input.StripeElement {
     border: 1px solid #ccc;
     /* opacity: 0;*/
     transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     will-change: opacity;
 }

 .sample .input.focused,
 .sample .input:not(.empty) {
     opacity: 1;
 }

 .sample .input.focused::-webkit-input-placeholder,
 .sample .input:not(.empty)::-webkit-input-placeholder {
     color: #cfd7df;
 }

 .sample .input.focused::-moz-placeholder,
 .sample .input:not(.empty)::-moz-placeholder {
     color: #cfd7df;
 }

 .sample .input.focused:-ms-input-placeholder,
 .sample .input:not(.empty):-ms-input-placeholder {
     color: #cfd7df;
 }

 /*  .sample .input.focused {
       height: 50px;
   }*/
 .sample .date + label,
 .sample .input.StripeElement + label,
 .sample .input.focused + label,
 .sample .input:not(.empty) + label {
     color: #aab7c4;
     transform: scale(0.85) translateY(-19px);
     cursor: default;
 }

 .sample .input.focused + label {
     color: #24b47e;
 }

 .sample .input.invalid + label {
     color: #ffa27b;
 }


 .sample .input.focused + label + .baseline {
     background-color: #24b47e;
 }

 .sample .input.focused.invalid + label + .baseline {
     background-color: #e25950;
 }

 .sample input,
 .sample button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     outline: none;
     border-style: none;
 }

 .sample input:-webkit-autofill {
     -webkit-text-fill-color: #e39f48;
     transition: background-color 100000000s;
     -webkit-animation: 1ms void-animation-out;
 }

 .sample .StripeElement--webkit-autofill {
     background: transparent !important;
 }

 .sample input,
 .sample button {
     -webkit-animation: 1ms void-animation-out;
 }

 .sample button:disabled {
     color: #ccc;
 }

 .sample button {
     display: block;
     width: calc(100% - 30px);
     height: 40px;
     margin: 40px 15px 0;
     /*  background-color: #24b47e;*/
     background-color: rgb(61, 66, 78);
     border-radius: 4px;
     color: #fff;
     /*   text-transform: uppercase;*/
     font-weight: 600;
     cursor: pointer;
 }

 .sample .error svg {
     margin-top: 0 !important;
 }

 .sample .error svg .base {
     fill: #e25950;
 }

 .sample .error svg .glyph {
     fill: #fff;
 }

 .sample .error .message {
     color: #e25950;
 }

 .sample .success .icon .border {
     stroke: #abe9d2;
 }

 .sample .success .icon .checkmark {
     stroke: #24b47e;
 }

 .sample .success .title {
     color: #32325d;
     font-size: 16px !important;
 }

 .sample .success .message {
     color: #8898aa;
     font-size: 13px !important;
 }

 .sample .success .reset path {
     fill: #24b47e;
 }