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

.smallbizContent {
  background-color: #e1eff8;
  padding: 0 !important;
  margin: 0 !important;

  .ui-dialog-titlebar {
    position: absolute;
    top: 0;
    right: 0;
    .ui-dialog-titlebar-close {
      margin: 5px;
    }
  }

  .info.icon {
    background: transparent url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/common/info-blue2.png) no-repeat 0 0;
    display: inline-block;
    height: 18px;
    width: 18px;
  }

  .live_chat_icon {
    background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/headerRedesign/header_toolbar_icons.png) no-repeat -125px -105px;
    display: inline-block;
    height: 18px;
    vertical-align: middle;
    padding-left: 20px;
  }

  #smallbizModule {
    display: table !important;
    padding: 0 !important;

    .primary {
      border-width: 0px;
      padding: 0px 12px;
    }
  }

  .row {
    display: table-row;
    position: relative;
    > article {
      display: table-cell;
      background-color: $white;
      padding: 40px;
      width: 460px;
    }

    .w50 > .btn.primary.w100 {
      width: 240px !important;
    }

    a.btn.primary.w100 {
      padding: 0;
    }

    a.btn.link_style {
      line-height: 1em;

      &.med_txt,
      &.med_txt:hover {
        padding-left: 0;
      }
    }
    h1 {
      @include font-size(30px);
      margin-bottom: 10px;
    }
    h1,
    h2 {
      color: $black;
      font-weight: $fontWeightSemiBold;
      line-height: 1.1;
      padding-bottom: 0;
      text-shadow: lighten($gray, 32%) 1px 1px .009px;
    }
    h2 {
      @include font-size(24px);
      margin-bottom: 10px;
    }
    header {
      float: left;
      margin-bottom: 30px;
      width: 100%;
    }
    p, ul {
      margin-bottom: 15px;
      line-height: 1.5;
    }
    form {
      width: inherit;
    }
    .logo.smallbiz {
      display: block;
      background: transparent url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/smallbizLogo.png') 0 0 no-repeat;
      height: 47px;
      width: 220px;
      padding-top: 57px;
      margin-bottom: 30px;
    }
    .messaging {
      &.text.success {
        background: $green none;
        margin-top: 0;
        padding: 10px;
        position: relative;
        left: 700px;
        p {
          background: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/common/success_message_check.png') no-repeat -3px -3px;
          color: $white;
          font-weight: $fontWeightNormal;
          margin: 0;
          padding-left: 30px !important;
        }
      }
    }
    .phone {
      input[type="text"], input[type="tel"] {
        margin-right: 10px;
        width: 2.5em;
      }
      input[name="phoneLastNo"],
      input[name="smallBizContactInfo.bizPhoneLastNo"] {
        width: 3.5em;
        margin-right: 0;
      }
      //Wider phone inputs are on registration
      &.wide {
        input[type="tel"] {
          padding: 4px;
        }
        input[type="tel"]:last-of-type {
          width: 2.5em;
        }
      }
    }
    .sidebar {
      display: table-cell;
      vertical-align: top;
      padding: 40px 15px 15px 15px;
      width: 230px;
      .default li {
        padding-left: 45px;
      }
      li {
        background-color: transparent;
        border: 0 none;
        border-bottom: 1px solid lighten($gray, 32%);
        overflow: hidden;
        padding: 16px 5px 16px 15px;
        position: relative;
        span {
          background: transparent url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/plcc/plccSprite.png') no-repeat;
          display: block;
          height: 30px;
          left: -100px;
          position: absolute;
          top: 10px;
          width: 30px;
        }
        &.active {
          color: $black;
          text-shadow: lighten($gray, 32%) 1px 1px .009px;
          font-weight: $fontWeightSemiBold;
          .icon {
            background-position: 0 0;
          }
          &.last .icon {
            background-position: -92px 0;
          }
        }
        &.completed {
          font-weight: $fontWeightSemiBold;
          color: $gray;
          .icon {
            background-position: -62px 0;
          }
        }
        &.disabled {
          color: $gray;
          .icon {
            background-position: -31px 0;
          }
        }
        &.last {
          border: 0 none;
          .icon {
            width: 34px;
          }
        }
        &.disabled.last .icon {
          background-position: -125px 0;
        }
      }
    }
    .note {
      line-height: 1.1;
    }
    .message {
      background: transparent url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/icons/warning.png') 10px 15px no-repeat;
      padding: 5px 5px 5px 40px;
      margin-top: 10px;
      margin-bottom: 0;
      @include border-radius(5px);
      @include font-size($baseFontSize - 2);
      p {
        @include font-size($baseFontSize - 2);
        margin-bottom: 0;
      }
      &.warning {
        background-color: $yellow;
      }
      &.error {
        color: $white;
        background-color: $red;
      }
    }
    .border-left {
      border-left: 1px solid darken($grayLight, 5%) !important;
    }
    .border-right {
      border-right: 1px solid darken($grayLight, 5%) !important;
    }
    .form_field {
      > label.error {
        padding: 5px 0 0 0;
        line-height: 1.4;
      }
      &.auto_width > input.btn {
        margin-right: 0;
        &:hover {
          margin-right: 0;
        }
      }
    }
    .preloader {
      display: inline-block;
      background: transparent right center no-repeat;
      padding-right: 35px;
    }
    .sidebar {
      h2 {
        font-weight: $fontWeightLight;
      }
    }

    .ODRegistrationStep1 {
      .info.icon {
        margin-left: 5px;
      }
    }



    //Small biz registration
    .registration {

      .form_field:not(.phone) {
        input, select, .btn {
          width: 340px;
        }
      }
      .ein_info {

        .info.icon {
          vertical-align: bottom;
        }

        color: $blue;
        float: right;
        margin-right: 104px;
        padding-bottom: 5px;
        text-align: right;
        width: auto;
        cursor: pointer;
      }

      .vSeal {
        display: inline-block;
        background-image: url('/fm/files/od/logos/vseal.gif');
        width: 100px;
        height: 58px;
        cursor: pointer;
        margin-top: -6px;
      }

    }
  }
}

@keyframes circlePulse {
  0% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

@-webkit-keyframes circlePulse {
  0% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

#passwordComplexityHintSb {
  background: $white;
  padding: 10px 10px;
  width: 240px;
  li {
    line-height: 1.6;
  }
  .pwd_one_accepted_characters {
    border-top: 1px solid $grayLight;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .circle_icon {
    border-radius: 50%;
    float: left;
    height: 11px;
    margin: 3px 6px 0 0;
    width: 11px;
    padding: 1px 3px 1px 1px;
    &.valid {
      border: 1px solid #90B50F;
      animation: circlePulse 0.4s 1;
      -webkit-animation: circlePulse 0.4s 1;
      background-repeat: no-repeat;
      filter: grayscale(100%) sepia(100%) hue-rotate(90deg);
      background: url(https://media.officedepot.com/image/upload/v1580180790/gtools/images/us/od/mini_check.png);
      background-repeat: no-repeat;
      background-position: center;
    }
    &.invalid {
      border: 1px solid #9c9c9c;
      filter: grayscale(100%);
      background: #FFF url(https://media.officedepot.com/image/upload/v1580180790/gtools/images/us/od/mini_check.png) no-repeat center;
    }
  }
}

#smallbizModule {
  .confirmation {
    h2 {
      margin-top: 18px;
      text-shadow: none;
    }
    .template_results {
      line-height: 2;
    }
    p {
      width: 100%;
    }
    .alert_msg {
      opacity: 1;
      > .svg {
        bottom: 2px;
        right: 12px;
      }
    }
    .sm_txt {
      font-size: 14px;
      margin-bottom: $commonPadding*11;
    }
  }
  .sidebar > .success,
  .sidebar > .outOfArea,
  .sidebar > .customerService {
    display: none;
    line-height: 1.4;

    h3 {
      font-weight: $fontWeightNormal;
      @include font-size($baseFontSize);
    }

    h4 {
      @include font-size(14px);
      padding-bottom: 0;
    }

    ul {
      list-style-type: square;
      padding-left: $commonPadding*4;

      li {
        strong {
          display: block;
        }

        border-bottom: none;
        overflow: visible;
        padding: $commonPadding*2 0;
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
  .sidebar > .show_sb_outofarea {
    .rewardsLogo {
      margin: 0 auto;
    }
    ul li {
      line-height: 1.5;
    }
  }
  article.login {
    .message.warning {
      opacity: 0;
    }
    form > ul {
      padding-right: 40px;
      margin-right: 20px;
    }
    li > span {
      display: block;
      padding-bottom: 5px;
    }
  }
  article.tropoLookup {
    label[for="memberId"].error, label[for="phoneNumberGroup"].error {
      display: block;
      margin-bottom: 15px;
    }
  }
  article.tropoVerification {
    .backToDelMethod {
      white-space: nowrap;
    }
  }
  .alert_msg {
    &.block_level {
      display: block;
    }
    font-size: $baseFontSize;
    margin: $commonPadding*3 0;
    opacity: 0;
    width: 100%;
    transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    &.no_show {
      position: fixed;
      right: 100%;
    }
    p {
      margin-left: $commonPadding*12;
      padding: $commonPadding 0;
    }
    .svg {
      background-color: #fff;
      border-radius: 50%;
      bottom: 6px;
      float: left;
      line-height: $commonPadding*6;
      padding: $commonPadding*2;
      position: relative;
      right: 8px;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transition: transform 1.4s ease-in-out;
      -webkit-transition: transform 1.4s ease-in-out;
    }
    &.msg_danger {
      background-color: #ce0000;
      p {
        color: #fff;
      }
      .svg {
        border: 4px solid #ce0000;
      }
    }
    &.msg_success {
      background-color: #90B50F;
      p {
        color: #111;
      }
      .svg {
        border: 4px solid #90B50F;
      }
    }
    &.show {
      opacity: 1;
      transition: opacity .2s ease-out;
      -webkit-transition: opacity .2s ease-out;
      .svg {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transition: transform 1.4s ease-in-out;
        -webkit-transition: -webkit-transform 1.4s ease-in-out;
      }
    }
  }
}