*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
::placeholder {
   color: #7a7a7a;
}
.container.stripe {
   padding: 20px;
}

.form-group { margin-bottom: 15px; }
.stripe label {
   display: inline-block;
   margin-bottom: 5px;
   font-weight: bold;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.stripe .field {
   display: block;
   width: 100%;
   padding: 0.75rem;
   font-size: 15px;
   color: #333333;
   background-color: #fff;
   background-image: none;
   border: 1px solid #ccc;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.stripe div.field { padding-bottom: 0; }
.stripe .field:focus {
   border-color: #66afe9;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.stripe .form-group iframe { height: 30px !important; }
#paymentElement { margin-bottom: 10px; }
.hidden { display: none; }

.stripe .btn {
   width: 100%;
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.33;
   border-radius: 6px;
   border: none;
   cursor: pointer;
}
.stripe .btn-success {
   color: #fff;
   background-color: #095cfa;
   border-color: #095cfa;
}
.stripe .btn-primary {
   color: #fff;
   background-color: #337ab7;
   border-color: #2e6da4;
}
.stripe .btn-primary i.rload{
   background-size: 100% 100%;
   float: left;
   width: 24px;
   height: 24px;
}
.stripe .btn-primary:hover i.rload { transform: rotate(360deg) scale(1.2); }
/*.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
color: #fff;
background-color: #387dff;
border-color: #387dff;
}*/

.stripe button:hover {
   filter: contrast(80%);
   background-color: #095cfa !important;
}
.stripe button:disabled {
   opacity: 0.5;
   cursor: default;
   background-color: #095cfa !important;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
   border-radius: 50%;
}
.spinner {
   color: #ffffff;
   font-size: 22px;
   text-indent: -99999px;
   margin: 0px auto;
   position: relative;
   width: 20px;
   height: 20px;
   box-shadow: inset 0 0 0 2px;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
}
.spinner:before,
.spinner:after {
   position: absolute;
   content: "";
}
.spinner:before {
   width: 10.4px;
   height: 20.4px;
   background: #095cfa;
   border-radius: 20.4px 0 0 20.4px;
   top: -0.2px;
   left: -0.2px;
   -webkit-transform-origin: 10.4px 10.2px;
   transform-origin: 10.4px 10.2px;
   -webkit-animation: loading 2s infinite ease 1.5s;
   animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
   width: 10.4px;
   height: 10.2px;
   background: #095cfa;
   border-radius: 0 10.2px 10.2px 0;
   top: -0.1px;
   left: 10.2px;
   -webkit-transform-origin: 0px 10.2px;
   transform-origin: 0px 10.2px;
   -webkit-animation: loading 2s infinite ease;
   animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
@keyframes loading {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

#frmProcess{
   font-size: 18px;
   color: #666;
}
.ring {
   display: inline-block;
   width: 75px;
   height: 75px;
   vertical-align: middle;
}
.ring:after {
   content: " ";
   display: block;
   width: 48px;
   height: 48px;
   margin: 8px;
   border-radius: 50%;
   border: 6px solid #095cfa;
   border-color: #095cfa transparent #095cfa transparent;
   animation: ring 1.2s linear infinite;
}
@keyframes ring {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}


#paymentResponse{
   font-size: 17px;
   border: 1px dashed;
   padding: 10px;
   color: #EA4335;
   margin-top: 0;
   margin-bottom: 10px;
}

.status{
   padding: 15px;
   color: #000;
   background-color: #f1f1f1;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
   margin-bottom: 20px;
}
.status h1{
   font-size: 1.8em;
}
.status h4{
   font-size: 1.3em;
   margin-bottom: 0;
}
.status p{
   font-size: 1em;
   margin-bottom: 0;
   margin-top: 8px;
}
.btn-link{
   display: inline-block;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 1px solid transparent;
   padding: .375rem .75rem;
   font-size: 1rem;
   line-height: 1.5;
   border-radius: .25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   text-decoration: none;
}
.btn-link {
   color: #007bff;
   background-color: transparent;
   border-color: #007bff;
}
.btn-link:hover, .btn-link:active, .btn-link:focus {
   color: #fff;
   background-color: #007bff;
   border-color: #007bff;
   text-decoration: none;
}
.success{
   color: #34A853;
}
.error{
   color: #EA4335;
}