/**
     * eWay payment form
     *
     * These styles are designed to augment the Botanic Garden's original 
     * non-responsible template.
     *
     * BEM-style classnames have been used, rather than base element selectors,
     * to prevent any collisions with the site's existing input fields and
     * labels.
     *
     * It is intended that this code will be incorporated into the Gardens' new
     * "Alpha" series responsive templates.
     **/
/**
     * Inline
     *
     * Apply inline-block and height/width resets for elements that need to be
     * displayed inline.
     **/
/**
     * Clearfix
     *
     * Ensure that any floating child elements are cleared. Although this
     * method only works in browsers than support the :after pseudo-element, it
     * has fewer side-effects than overflow:hidden
     **/
.eway-payment-form__group--dob:after,
.eway-payment-form__group--address:after,
.eway-payment-form__group--card-type:after,
.eway-payment-form__group--card-expiry:after {
  content: "";
  display: table;
  clear: both; }

/**
     * eWay payment form block
     *
     * 1. Prevent iOS from resizing fields
     *
     * 2. Use border-box on all child elements of the form,
     **/
/*div, form*/
.eway-payment-form {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* [1] */
  width: 80%; }
  .eway-payment-form * {
    box-sizing: border-box;
    /* [2] */ }

/*ul*/
.eway-payment-form__error-list {
  color: red; }
  .eway-payment-form__error-list a {
    color: red; }

/**
         * Group
         *
         * An optional logical group for input items
         **/
/*fieldset*/
.eway-payment-form__group {
  border: none;
  margin: 0;
  padding: 0; }

/**
         * 1. Assign "row" layout to groups to allow complex layouts
         *
         * 2. Assign "column" layout to all children of row groups
         **/
/*fieldset*/
.eway-payment-form__group--dob,
.eway-payment-form__group--address,
.eway-payment-form__group--card-type,
.eway-payment-form__group--card-expiry {
  /* [1] */ }
  .eway-payment-form__group--dob > *,
  .eway-payment-form__group--address > *,
  .eway-payment-form__group--card-type > *,
  .eway-payment-form__group--card-expiry > * {
    /* [2] */ }

/**
         * Item
         *
         * A container for each input field and its label, etc.
         *
         * 1. Apply normal line-height to prevent any inheritance (eg when the
         *    item is the child of .eway-payment-form__label)
         **/
/*div*/
.eway-payment-form__item {
  line-height: normal;
  /* [1] */
  margin-bottom: 11px; }

/**
         * Conditional item
         *
         * 1. Hide the conditional item by default, as they will be dynamically
         *    shown/hidden using JavaScript
         *
         * 2. Make sure the item is visible is JavaScript is disabled, as it
         *    can't be dynamically shown/hidden
         **/
/*div*/
.eway-payment-form__item--conditional {
  display: none;
  /* [1] */ }
  .no-js .eway-payment-form__item--conditional {
    display: block;
    /* [2] */ }

/**
         * These items require specific styling, but because we cannot edit the 
         * form's HTML, the styles must be applied to each individual class,
         * preferably using @extends to prevent duplication and maintain order.
         **/
/*div*/
/*div*/
/*div*/
/*div*/
/*div*/
/*div*/
/*div*/
/**
             * Labels and errors
             *
             * Generic label formatting for each item.
             **/
/*label, legend*/
.eway-payment-form__label,
.eway-payment-form__error {
  display: block;
  line-height: 24px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%; }
  .eway-payment-form__input--checkbox + .eway-payment-form__label,
  .eway-payment-form__input--radio + .eway-payment-form__label,
  .eway-payment-form__input--checkbox + .eway-payment-form__error,
  .eway-payment-form__input--radio + .eway-payment-form__error {
    display: inline-block;
    height: auto;
    width: auto;
    vertical-align: middle; }

/*span*/
.eway-payment-form__error {
  color: red;
  font-weight: bold; }
  .eway-payment-form__group > .eway-payment-form__error {
    margin-top: -11px; }

/**
             * User interface control
             *
             * Consistent styling for all interactive elements.
             *
             * 1. Remove default user-agent styling in -webkit and -moz browsers
             *
             * 2. Use transitions to create a smoother change when the element
             *    is focused.
             *
             * 3. Override user-agent :focus styling
             **/
.eway-payment-form__label--checkbox,
.eway-payment-form__label--radio, .eway-payment-form__input--text,
.eway-payment-form__input--drop-down {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* [1] */
  border: 1px solid #aaa;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 6px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  /* [2] */ }
  .eway-payment-form__label--checkbox:focus,
  .eway-payment-form__label--radio:focus, .eway-payment-form__input--text:focus,
  .eway-payment-form__input--drop-down:focus {
    border-color: #66afe9;
    /* [3] */
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.075), 0 0 6px #66afe9;
    /* [3] */
    outline: 0;
    /* [3] */ }

/**
            * 1. Use equal height and line-height to vertically align text
            *
            *
            **/
/*label*/
.eway-payment-form__label--checkbox,
.eway-payment-form__label--radio {
  background-color: #f7f7f7;
  height: 48px;
  /* [1] */
  line-height: 48px;
  /* [1] */ }

/**
                 * Label title
                 *
                 * Specific title formatting for the main portion of an input's
                 * label. This is necessary to separate the "title" portion of 
                 * the label element from the "hint" portion than includes 
                 * basic instructions on what information should be entered in
                 * the field.
                 **/
/*span*/
.eway-payment-form__title {
  font-weight: bold; }
  .eway-payment-form__group .eway-payment-form__item .eway-payment-form__title {
    font-weight: normal; }

/**
                 * Label hint
                 *
                 * Provide contextual instructions for each field.
                 **/
/*span*/
.eway-payment-form__hint {
  color: grey;
  display: block; }

/**
                 * Inline label hint
                 *
                 * Provide additional information about each field (such as 
                 * whether it is optional)
                 **/
/*span*/
.eway-payment-form__hint--inline {
  color: grey;
  display: inline-block; }
  .eway-payment-form__hint--inline::before {
    content: "(";
    display: inline-block; }
  .eway-payment-form__hint--inline::after {
    content: ")";
    display: inline-block; }

/**
             * Inline input hint
             *
             * Provide a hint, such as a dollar sign, as the start of an
             * input field.
             **/
/*span*/
.eway-payment-form__hint--input {
  display: block;
  float: left;
  height: 24px;
  line-height: 24px;
  margin-right: -100%;
  padding: 0 6px; }

/**
             * Input
             *
             * Basic input formatting
             **/
/*button, input, select*/
.eway-payment-form__input {
  display: block;
  width: 100%; }
  .eway-payment-form__label--checkbox > .eway-payment-form__input,
  .eway-payment-form__label--radio > .eway-payment-form__input {
    display: inline-block;
    height: auto;
    width: auto;
    vertical-align: middle;
    border-radius: 2px;
    margin: 3px 3px 5px 3px; }

/**
             * Text (inc. number, password etc) and drop-down (select) input
             *
             * This includes the bulk of the styling for text-based input
             * fields. Additional formatting for drop-down (select) inputs is
             * defined separately.
             *
             * 1. Use equal height and line-height to vertically align text
             **/
/*input*/
.eway-payment-form__input--text,
.eway-payment-form__input--drop-down {
  height: 24px;
  /* [1] */
  line-height: 24px;
  /* [1] */ }

/**
             * Drop-down (select) input
             *
             * It is difficult to successfully apply cross-browser styling in
             * all but the newest browsers. These settings should achieve 
             * satisfactory, but inconsistent, results.
             *
             * 1. Remove default user-agent styling in -webkit and -moz browsers
             *
             * 2. Remove the user-agent drop-down select in newer -ms browsers
             *
             * 3. Add a right-aligned background image to replace the standard
             *    dropdown selector (if possible)
             **/
/*select*/
.eway-payment-form__input--drop-down {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* [1] */
  background-color: #f7f7f7;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
  /* [3] */
  background-position: 100% center;
  /* [3] */
  background-repeat: no-repeat;
  /* [3] */
  max-width: 140px;
  vertical-align: middle; }
  .eway-payment-form__input--drop-down::-ms-expand {
    display: none;
    /* [2] */ }

/**
             * Button
             **/
/*button, input[type=submit]*/
.eway-payment-form__input--button {
/*.eway-payment-form__item--submit > .eway-payment-form__input--button {*/
  background: #008241;
  border: none;
  color: white;
  display: inline-block;
  height: auto;
  padding: 8px 12px;
  width: auto; }

/**
             * Dollar amount
             *
             * Add additional padding to ensure the "$" input hint doesn't 
             * collide with the input text
             **/
/*input*/
.eway-payment-form__input--dollar {
  padding-left: 16px; }

/**
     * Row and column
     *
     * A float-based grid system. Uses extend-only classes as we aren't able
     * to edit the HTML.
     **/
.eway-payment-form__group--dob,
.eway-payment-form__group--address,
.eway-payment-form__group--card-type,
.eway-payment-form__group--card-expiry {
  margin-left: -11px !important; }

.eway-payment-form__group--dob > *,
.eway-payment-form__group--address > *,
.eway-payment-form__group--card-type > *,
.eway-payment-form__group--card-expiry > * {
  float: left;
  padding-left: 11px !important;
  width: 100%; }

/**
     * Widths
     *
     * Uses extend-only classes as we aren't able to edit the HTML.
     **/
.eway-payment-form__item--visa,
.eway-payment-form__item--mastercard {
  width: 50% !important; }

.eway-payment-form__item--day,
.eway-payment-form__item--month,
.eway-payment-form__item--year, .eway-payment-form__item--day > .eway-payment-form__input,
.eway-payment-form__item--month > .eway-payment-form__input, .eway-payment-form__item--postcode,
.eway-payment-form__item--country, .eway-payment-form__item--card-month,
.eway-payment-form__item--card-year, .eway-payment-form__item--card-month > .eway-payment-form__input,
.eway-payment-form__item--card-year > .eway-payment-form__input {
  width: 33.33333% !important; }

.eway-payment-form__item--city,
.eway-payment-form__item--state {
  width: 66.66667% !important; }

.eway-payment-form__item--card-ccv > .eway-payment-form__input {
  width: 11.11111% !important; }