@import 'css/master/settings/settings';

#enrollmentWrapper {
  * {
    @include box-sizing;
  }

  .form_field {
    margin-top: 10px;

    > input {
      height: 38px;
      width: 60px;
      margin-left: 6px;
    }

    > label {
      height: 30px;
      width: 90px;
      @include font-size($baseFontSize - 2);
    }

    .star {
      position: inherit;
    }

    > .info {
      position: absolute;
      top: 0.6em;
      left: 10em;
    }

  }

  .margin_left{
    margin-left: 0;
  }

  .customer_info {
    background-color: #f2f3f5;
    @include border-radius(5px);
    border: 1px solid $borderGray;
    height: 230px;
    padding: 20px;
    position: relative;

    .edit_customer_info {
      height: 47px;
      float: right;
    }

    .edit_icon {
      background: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/replenish/edit_icon.png')  0px 5px no-repeat;
      width: 40px;
      height: 23px;
      vertical-align: bottom;
      display: inline-block;
    }

    .add_icon {
      background: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/replenish/add_icon.png')  0px 0px no-repeat;
      width: 25px;
      height: 25px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
    }
  }

  #enrollmentDropDowns {
    display: table;
    width: 100%;

    .col {
      display: table-cell;
      margin-right: 1%;
      width: 32.3%;
      float: left;
    }

    .open {

      .filter_button {
        border-bottom: none;
        @include border-radius(4px 4px 0 0);
        @include box-shadow(0 1px 2px 0, rgba(0, 0, 0, 0.22));
        margin: 0;
      }

      input[type="radio"] + label span {
        display: inline-block;
      }

      .margin_left {
        margin-left: 14px;
      }
    }

    li {
      @include font-size($baseFontSize - 4);

      &:hover{
        opacity: 1;
      }
    }

    .filter_button {
      margin: 0;
      height: 50px;
    }

    .active, .selected {
      background-color: $white;
      color: $black;
      border: 1px solid $gray;
    }

    .label {
      width: 100%;
      height: 100%;

    }

    .open {

      .name {
        padding: 10px 10px;
      }

      .radio_btn {
        display: inline-block;
        float: left;
        vertical-align: top;
      }

      .shipping_address_row,
      .credit_card_row {
        display: inline-block;
        width: 187px;
      }
    }

    .name {
      width: 87%;
      height: 100%;
      margin: 0;
    }

    .arrow {
      width: 13%;
      margin: 0;
    }

    .dropdown_option {
      width: 10%;
      margin: 6px 6px 6px 10px;
      float: left;
    }

    .triangle {
      color: $gray;
      top: 16px;
      right: 20px;
    }

    .dropdown_content {
      position: relative;
    }

    .data_list {
      width: 100%;
      border: 1px solid $gray;
      border-top: 0;
      z-index: 999;
      position: absolute;
      top: 48px;

      li {
        padding: 10px 10px 10px;
        min-height: 50px;
      }

      a {
        width: 100%;
        line-height: 21px;
        height: 100%;
        font-size: 16px;
        padding: 0;
      }

      li:last-child {
        margin-top: 15px;
        padding: 10px;
        border-top: 1px solid $grayLight;
      }

      .hide {
        display: none;
      }

      li:nth-child(1) {
        border-bottom: 0;
      }

    }
  }

  .credit_card_logo {
    @include opacity(1);
    display: inline-block;
    width: 38px;
    height: 24px;
    background-position: center;
    text-indent: -999em;
    vertical-align: middle;

    &.DS {
      background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/checkout/cc-logo-ds.png');
      @include zoom(.8);
    }
    &.AM {
      background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/checkout/cc-logo-am.png');
      @include zoom(.8);
    }
    &.MC {
      background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/checkout/cc-logo-mc.png');
      @include zoom(.8);
    }
    &.VS {
      background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/checkout/cc-logo-vs.png');
      @include zoom(.8);
    }
    &.SR {
      background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/od/checkout/cc-logo-od.png');
      @include zoom(.8);
    }
  }

  #shippingInfo {
    .name {
      padding: 8px 10px;
      line-height: 16px;
    }

    .data_list {
      margin-top: 0;
    }

  }

  #paymentMethod {
    .credit_card_row{
      width: 250px;
      font-weight: $fontWeightBold;
    }

    .expired {
      color: $red;
    }

    .name {
      padding: 15px 10px;
    }

  }

  #billingInfo {
    .billing_info_row {
      margin-left: 14px;
    }
  }

  .shipping_address_row {
    .customer_address {
      @include font-size($baseFontSize - 6);
    }
  }
}