html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by header and footer height */
  padding-top: 60px;
  margin-bottom: 60px;
}


/* footer */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.footer > .container {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

select.date-select
{
    max-width: 90px;
    display: inline-block;
}

/* Set validation error styles*/
.field-validation-error, label.error{
    color: #d2322d;
    font-style: italic;
    font-weight: normal;
    font-size: small;
}

.input-validation-error, input.error, select.error{
    border-color: #d2322d;
}

.error-header
{
    color: white;
    background-color:#d2322d; 
}

legend {
    border-bottom: 1px solid #6DB33F;
}

/* form labels text align*/
label{
    text-align: right;
    width: 100%;
}

.button-wide
{
    width: 100%;
    max-width: 140px;
}

@media screen and (max-width: 992px){
    label{
        text-align: left!important;
    }
}

/* Bambora Token styles*/
.container {
    background-color: rgb(240, 240, 240);
    margin: auto;
    width: calc(95%);

    border: none;
    border-radius: 4px;
}

#checkout-form {
    position: relative;
    width: calc(95%);
    margin: auto;
    padding: 10px;
}

#checkout-form label {
    display: block;
    min-height: 25px;

    font-size: 15px;
    font-weight: 500;
    margin: 5px 0;
    padding: 0;
    color: red;
}

#card-number, #card-cvv, #card-expiry {
    background-color: #FFF;
    display: block;
    width: calc(90%);
    border-radius: 2px;
    border: 1px solid rgba(200, 200, 200, 1);
    padding: 14px 60px 13px 20px;
    margin: auto;
    transition: all 100ms ease-out;
}

/* card images are added to card number */
#card-number {
    background-image: none;

    background-origin: content-box;
    background-position: calc(100% + 40px) center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* feedback is displayed after tokenization */
#feedback {
    position: relative;
    left: 15px;
    display: inline-block;
    background-color: transparent;
    border: 0px solid rgba(200, 200, 200, 1);
    border-radius: 4px;
    transition: all 100ms ease-out;
    padding: 11px;
}

#feedback.error {
    color: red;
    border: 1px solid;
}

#feedback.success {
    color: seagreen;
    border: 1px solid;
}