/*----- Styles for payment form ---------*/

form.auth-pay {
  text-align: center;
  margin: 2em auto;
  width: 90%;
  max-width: 480px;
}
input.number {
  width: 7em;
  text-align: right;
  float: right;
  margin-bottom: .2em;
}
.auth-pay h3 {
  font-size: 1em;
}
.auth-pay label {
  display: inline-block;
}
.auth-pay fieldset {
  border: 1px solid #000;
  padding: .5em .5em .5em;
  border-radius: .4em;
  background-color: #d7edfb;
}
.auth-pay legend {
  padding: .5em;
  margin: auto;
}
.auth-pay hr {
  border-color: #444;
}
.auth-pay p {
  margin-bottom: 1em !important;
}
.auth-pay p.small {
  clear: both;
  font-size: 85%;
  line-height: 1.1;
}
.auth-pay #pay-calc {
  display: flex;
  text-align: left;
  align-items: top;
  margin: 0 .5em 1em;
}
.auth-pay #pay-calc div {
  flex-basis: 50%;
}
.auth-pay .left {
  float: left;
}
.auth-pay .right {
  float: right;
}
#showCreditCard, #showBankAccount {
  vertical-align: top;
  margin-top: .45em;
}
#display-calc {
  display: flex;
  flex-direction: column;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Authorize.net seal */

.AuthorizeNetSeal {
  float: left;
  position: relative;
  bottom: 20px;
  left: 20px;
}

/* Media Queries */

@media only screen and (max-width: 420px) {
  .node {
    margin-bottom: 0;
    padding: 0;
  }
  form.auth-pay {
    margin: .1em auto;
    width: 100%;
  }
  label {
    font-weight: 500;
    font-size: 90%;
  }
}