body
{
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden; 
    background-color: #eee;
    font-size: 17px;
    font-weight: normal;
    color: #404040;
}

.padding10
{
  padding: 10px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  margin: 0px;
}

.card{
  border-radius: 10px;
}
.card-header:first-child
{
  border-radius: 10px 10px 0 0;
}
.card-header
{
  padding: 8px;
  background-color: #f62D43;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 0px;
}

.card-secure
{
  background-color: #00B28B;
}

.card-text{ padding-top: 1.25rem; }
.description-text { color: #8c8c8c; font-size: 24px; }

.form-control
{
  height: 56px;
  border: 1px solid #8e8e8c;
  color: #8e8e8c;
}
.form-control:focus{
  border-color:#2196f3;
  box-shadow: 0 0 0 0.1rem rgb(32, 148, 243)
}

label {
  position:relative;
  display:inline-block;
  width: 100%;
}
  
span {
  padding:15px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
  font-size: 17px;
}
input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
  padding: 0px 2px;
  margin:6px 0 0px 20px;
  background: white;
  font-size: 17px;
  color: #2196f3;
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
  padding: 0px 2px;
  margin:6px 0 0px 20px;
  background: white;
  font-size: 17px;
}

.btn-primary
{ 
  width: 100%;
  margin-bottom: 10px;
  border-radius: 20px;
  background: #0096ee;
  font-weight: 500;
  text-transform: uppercase;
  border-color:#0096ee;
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  border-color:#0096ee;
  background: #0096ee;
  box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle
{
  border-color:#0096ee;
  background: #0096ee;
  box-shadow: none;
}


.cancel-btn, .cancel-btn:hover,.cancel-btn:focus,.cancel-btn:active{
  background: #dbf0fc;
  border-color:#dbf0fc;
  color: #0097ee;
  box-shadow: none;
}

.cancel-btn:not(:disabled):not(.disabled).active, .cancel-btn:not(:disabled):not(.disabled):active, .show>.cancel-btn.dropdown-toggle
{
  border-color:#dbf0fc;
  background: #dbf0fc;
  color: #0097ee;
  box-shadow: none;
}

img
{
   height: auto;
}

.price-text
{
  line-height: 2.2;
  font-size: 15px;
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 0;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.wrapper
{ 
  padding: 10px;
}


.cardbox {
  margin-top: 0px;
  background: #fff;
  line-height: 1.5em;
}


@media (min-width: 992px)
{
  .maindiv {
     width: 550px; 
  }
}
@media (min-width: 360px)
{
  .maindiv {
    width: 550px;
  }
}

@media screen and (min-width: 997px) {
  .maindiv
  {
    width: 550px;
  }
  .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; 
  } 
}

.details
{
  padding:1.2em 3em 1.2em 3em;
}

p {
    margin:0px;
}



/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.StripeElement{
  display: block;
  width: 100%;
  height: 56px;
  padding: 15px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  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,-webkit-box-shadow ease-in-out .15s;
  -o-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;
  border: 1px solid #8e8e8c;
}
.btn-primary:disabled
{
    background: #CBCBCB;
    border-color: #CBCBCB;
    color: #9D9D9D;
}
#pay_loader
{
  color:#2196F3;
  display: none;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1rem;
}
.close_icon
{
  color: #EF303B;
    font-size: 20px;
}
.alert-danger {
    color: #EF303B !important;
    background-color: #FDEAEB !important;
    border-color: #FDEAEB !important;
    font-weight: 500 !important;
}
.alert-success {
    color: #427F49 !important;
    background-color: #EBF1EC !important;
    border-color: #EBF1EC !important;
    font-weight: 500 !important;
}
.success_icon
{
  font-size: 20px;
  color: #427F49;
}
.provided{ font-size: 12px; padding-top: 10px;}
.company-logo { height: 55px; }
.default-logo { width: 170px; }
.alert{ margin-bottom: 0px; }