@import 'css/master/settings/settings';
@import 'webapps/pos_loyalty_completion/scss/profile_completion_interstitial';

#registrationModule {
  padding: 0;
  margin: 0;
  outline: none;
  .phoneNumber_lookup {
    .odTooltip {
      top: 98.5px !important;
      left: 278px !important;
    }
  }

}

.enrollment_flow {
  &.ui-dialog {
    background-color: $grayLight;
    padding: 0;
    margin: 0 !important;
    z-index: 10002 !important;
    .ui-dialog-titlebar {
      line-height: 16px;
    }
    .ui-dialog-titlebar-close {
      right: 5px;
      top: 5px;
      right: 5px;
    }
    h2 {
      margin-bottom: 1rem;
      @include font-size ($baseFontSize + 8);
    }
  }
  header {
    padding: 0px 15px 20px;
    height: 50px;
  }
  .row {
    display: block !important;
    background: #fff;
    article {
      display: block;
      padding: 15px 15px 0 !important;
      width: 95% !important;
    }
    .modal_content {
      min-height: 350px;
    }

    .membership_number {
      &::before {
        content: "";
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        width: 0;
        height: 0;
        position: absolute;
        top: 35%;
        left: -2px;
        border-left: 4px solid $blue;
      }
    }
  }

  #couponWarning {
    margin-bottom: 30px;
    p {
      font-weight: bold;
      @include font-size ($baseFontSize);
    }
  }
  .odTooltip {
    background: #fff;
    font-weight: 600;

    &.caretLeft {
      .caret {
        top: 65%;
      }
    }
  }
  footer {
    padding-right: 15px;
    padding-left: 12px;
    .csr_tooltip {
      margin-left: 22px;
      border-bottom: 1px solid $borderGray;
      padding-bottom: 4px;
    }

  }

  .login_screen_btn {
    margin-top: 25%;
  }

  .create_account {
    #passwordComplexityHint {
      top: -18px!important;
    }
  }

  .btn_wrap {
    .previous_btn {
      margin-right: 3%;
    }
  }

  .b_fields {
    color: $gray;
  }

  .error {
    clear: left;
    float: left;
  }

  .phoneNumber_lookup {
    label.error{
      font-size: 12px;
    }
  }

  .create_account, #forgotpassform {
    .error {
      float: left;
    }
  }

  .email_login {
    .is_floated {
      .sm_note {
        display: none;
      }
    }
  }

  .form_field {
    label.error_property {
      margin-bottom: 20px;
    }
    .google_addr_search {
      padding-top : 8px;
      padding-bottom: 8px;
    }
  }
  .info_icon_div {
    line-height: 36px;
    height: 36px;
    vertical-align: middle;
    padding-left: 12px;
  }
  .feature_icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    display: inline-block;
    text-align: center;
    line-height: 50px;
  }

  .no_rewards_join{
    margin-top: 118px;
    margin-left: -67px;
  }

  .toolTipMessage .odTooltip.caretTop75 .caret {
    left: 72%;
    margin-left: -9px;
  }

  .toolTipMessage .caretTop75.odTooltip {
    top:40% !important;
    left: 59% !important;
  }

  .push_right_toolTip{
    margin-right: 49px;
  }

  .ftb {
    margin-top: -20px;
    margin-bottom: 10px;
  }
  .msg_success_haveOd{
    width:80%
  }

  .msg_success {
    p {
      padding: $commonPadding + 2 0;
      color: $black;
    }
  }
  .show_or {
    position: absolute;
    right: 4px;
    top: 5%;
    color: $gray;
  }
  .min_height200 {
    min-height: 200px;
  }
  .create_no_rewards {
    line-height: 34px;
  }
  .process_complete {
    .user_first_name {
      line-height: 26px;
      @include font-size($baseFontSize + 8);
      font-weight: 600;
    }
  }


  .membership_select {
    width: 130px;
    border: 2px solid $grayLight;
    padding: 6px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: $gray;
    cursor: pointer;
    &:hover, &.active {
      border: 2px solid $blue;
      color: $blue;
    }
    &.active {
      background: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/messaging/success.svg') no-repeat 113px 7px;
    }
    .loyalty_member_type {
      border: none;
      outline: none;
      //-webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin-left: -4px;
      opacity: 0;
    }
  }

  .phone_call, #chatOption {
    cursor: pointer;
  }

  .svg_checkmark {
    height: auto;
    bottom: 2px;
  }

}


.progress {
  height: 6px;
  overflow: hidden;
  background-color: $white;
  width: 100%;
  border: 1px solid $grayLight;
  border-right: none;
  border-left: none;
  max-width: 100%;
  display:block;
  .progress_bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: $white;
    text-align: center;
    background-color: $green;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .8s ease;
    -o-transition: width .8s ease;
    transition: width .8s ease
  }
}


.customer_service_option {
  position: absolute;
  top: -170px;
  background: $grayLight;
  border: 1px solid $black;
  padding: 10px;
  width: 200px;
  left: -43px;
  .close_modal {
    width: 6px;
    height: 16px;
  }
  ul {
    font-size: 12px;
    clear: both;
  }
  &::after, &::before{
    top: 100%;
    left: 82%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &::after {
      border-color: rgba(229, 232, 235, 0);
      border-top-color: $grayLight;
      border-width: 10px;
      margin-left: -30px;
  }
  &::before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: $black;
    border-width: 11px;
    margin-left: -31px;
  }


}
#anonSignUpForm #passwordComplexityHint {
  display: none!important;
}

.pac-container {
  z-index: 10000 !important;
}

.enrollment_firstName {
  margin-right: 12px !important;
}

.enrollment_firstName, .enrollment_lastName {
  width: 223px !important;
}

#regStep1Email.dup-email-input {
  border-color: #c00;
  background-color: #f2bfbf;
}

.dup-email-msg {
  float: left;
  display: block;
}

.accept-create-account-terms {
  label {
    white-space: normal;
  }
}