.membership-card-radio{
  text-align:center;
  padding: 0;
  width: 32%;

  &.columns{
    padding-left: 0;
    padding-right: 0;
  }
}

.membership-card-radio-plus-primary{
  text-align: center;
  padding: 0;
  width: 49%;

  &.columns{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ------------- Input Styles  ------------- */
%inputs-thirds{
  max-width: 30%;
  float: left;
}

%inputs-halves{
  max-width: 47.5%;
  float: left;
}

/* ------------- Custom Radio Button + Checkbox Styles  ------------- */
.checkboxes{
  label{
    padding: $base-padding*2;
    width: 100%;
  }

  .box2{
    margin-top: $base-margin*2;
  }
}

.checkbox-content{
  display: inline;
  padding-left: $base-padding*8;
}

.radio-label{
  padding: $base-padding*2;
  width: 100%;
}

.radio-options{
  padding: 0;
  width: 100%;
}

input[type="radio"],
input[type="checkbox"]:not(.default){
  position: absolute;
  left: -9999px;
  margin: 0;
}

input[type="radio"] + label,
input[type="checkbox"] + label{
  background: $ash;
  border: $base-border;
  margin: 0;

  &:nth-child(2){
    margin-top: -1px;
  }

  .membership-card-header{
    border-bottom: $base-border;
    background: darken($ash, 4%);
  }
}

input[type="radio"] + label > span:first-of-type,
input[type="checkbox"] + label > span:first-of-type,
input[type="radio"] + label span:first-of-type{
  display: inline-block;
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: $base-margin 0 $base-margin*2;
  vertical-align: top;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius:  50%;
  background-color: $white;
  border: $base-border;
}

input[type="checkbox"] + label > span:first-of-type{
  max-width: 10%;
  margin: $base-margin $base-margin*2 $base-margin 0;
}

.checkbox-label{
  display: inline-block;
  width: 80%;
}

input[type="radio"]:checked + label > span:first-of-type,
input[type="radio"]:checked + label span:first-of-type{
  background-color: $white;
  border: 7px solid $secondary-color;
}

input[type="radio"]:checked + label{
  background-color: $sky;
  border: 1px solid $ocean;
  position: relative;

  &>hr{
    border: solid $ocean;
    border-width: 1px 0 0;
    height: 0;
  }

  .membership-card-header{
    border-bottom: 1px solid $ocean;
    background: darken($sky, 4%);
  }
}

input[type="checkbox"]:checked + label{
  position: relative;
}

[type="checkbox"]:checked + label:before{
  content: '✔';
  background-color: $secondary-color;
  color: $white;
  position: absolute;
  width: 30px;
  min-width: 30px;
  max-width: 10%;
  height: 30px;
  top: 15px;
  padding-left: 6px;
  font-size: $base-font-size*1.3;
  -moz-border-radius: 50%;
  border-radius:  50%;
  margin: 0 $base-margin*2 $base-margin 0;
}

[type="checkbox"]:checked + label:after{
  margin-left: $base-margin*6;
}

.month, .year{
  @extend %inputs-thirds;
}

.day{
  @extend %inputs-thirds;
  margin: 0 5%;
}

p.hint{
  font-size: $base-font-size*0.85;
  color: darken($smoke, 15%);
  font-style: italic;
}

/* ------------- Error Messaging ------------- */
.error small.error,
small.error{
  background: $brand-red;
}

.error label,
.error label.error{
  color: $brand-red;
}

.error-message{
  background: $brand-red;
}

.join-birthdate small.error{
  margin-top: $base-margin*8;
}

.email_hint{
  color: $brand-red;
  display: none;
  font-size: 0.875em;
  margin: -$base-padding*2 0 $base-padding*2;
}

.email_domain{
  color: $brand-blue-insurance;
  font-weight: bold;
  text-decoration: underline;
}

/* ------------- Moneris ------------- */
#monerisFrameSurround iframe,
#monerisFrameSurround object,
#monerisFrameSurround embed {
  width: 100%;
}

.iframe-error {
  margin-top: -8px !important;
}

form.moneris {
  display: none;
}

/* ------------- For All IE ------------- */
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="datetime"]:-ms-input-placeholder,
input[type="datetime-local"]:-ms-input-placeholder,
input[type="month"]:-ms-input-placeholder,
input[type="week"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="time"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
textarea{
  color: darken($stone, 10%);
}