.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;
  width: 100%;

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

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

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

input[type="radio"] + label > span:first-of-type,
input[type="radio"] + label span:first-of-type{
  margin: 7px $base-margin;

  &:before{
    content: ' ';
    border-radius: 100%;
    margin: 6px auto 0 auto;
    transition: all .5s ease-in-out;
  }
}

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

  &:before{
    content: '';
    display: block;
    position: relative;
    width: 8px;
    height: 8px;
    background-color: $secondary-color;
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
  }
}

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"] + label > span:first-of-type{
  border-radius: 0;
  max-width: 10%;
  margin: $base-margin $base-margin*2 $base-margin 0;
}

.checkbox-label{
  display: inline-block;
  width: 80%;
  margin-top: 8px;
  margin-bottom: 8px;
}

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

  &:before{
    content: '';
    display: block;
    position: absolute;
    left: 14px;
    top: 28px;
    width: 8px;
    height: 16px;
    border-right: 3px solid $white;
    border-top: 3px solid $white;
    transform:(scaleX(-1) rotate(180deg + -45deg));
    transform-origin:left top;
    -webkit-transform:(scaleX(-1) rotate(180deg + -45deg));
    -webkit-transform-origin:left top;
    -moz-transform:(scaleX(-1) rotate(180deg + -45deg));
    -moz-transform-origin:left top;
    animation:checkbox 0.8s;
  }

  span:first-of-type{
    background: $brand-blue-light;
  }
}

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

@keyframes checkbox{
  0%{
   height: 0;
   width: 0;
   }

  25%{
    height: 0;
    width: 8px;
  }

  50%{
    height: 17px;
    width: 8px;
  }
}

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

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

.hour,
.minute{
  @extend %inputs-halves;
}

.minute{
  float: right;
}

p.hint{
  font-size: $base-font-size*0.75;
  line-height: $base-font-size;
  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%);
}