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

$lightBlue: lighten($blue, 40%);

#accountLandingPage {
  font-size: 14px;
  overflow: hidden;

  > h1 {
    font-size: 30px;
    font-weight: $fontWeightNormal;
    display: inline-block;
    float: left;
    width: 45%;
  }

  .no-recent-orders {
    color: #B30000;
  }

  .tab_content_section {
    padding: $commonPadding*4 0;

    h2 {
      font-weight: $fontWeightSemiBold;
      padding-bottom: 0;
    }
  }
}

#addUserForm {
  transform: scale(0, 1);
  -webkit-transform: scale(0, 1);
  transform-origin: right;
  -webkit-transform-origin: right;

  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;

  &.show {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
  }

  ul {
    clear: left;
    li {
      display: inline;
      float: left;
      margin-right: $commonPadding*3;
      width: 22%;
    }
  }

  .form_field.float_label > input + label.is_floated {
    bottom: 48px;
    background: #fff;
    color: #111;
  }

  .form_field > input.error {
    background: #fff;
  }

  .form_field.float_label > input.error + label.is_floated {
    color: #C00;
    bottom: 48px;
  }

  .hasError {
    input {
      border: 1px solid $red;
    }
    &.float_label > input + label.is_floated {
      color: $red;
    }
  }
}

#showAcctLinkError {
  color: $red;
  @include font-size($baseFontSize - 4);
}

#addUserBtn {
  top: 0;
  width: 140px;
  z-index: 10;
  &.is_dropped {
    top: 82px;
    margin-right: 12px;
    right: 90px;
  }
}

#triggerCancel {
  line-height: 35px;
}

#accountUsersTable {
  tr {
    border-bottom: 1px solid $grayMedium;
    th {
      @include font-size($baseFontSize);
      padding: $commonPadding 0;
    }
    td {
      display: table-cell;
      &.firstCol {
        width: 12%;
      }
      &.lastCol {
        width: 23%;
        padding-left: $commonPadding;
        span {
          padding-right: 0;
        }
      }
      span.full_width {
        width: 100%;
        display: inline-block;
        padding: ($commonPadding * 3);
        padding-left: $commonPadding;
        &.column1 {
          padding-left: $commonPadding;
        }
        &.remove {
          padding-left: 0px;
        }
      }
    }
    .column1 {
      padding-left: $commonPadding + 2;
    }
    .add_fx_width {
      max-width: 95px;
      width: 95px;
      display: inline-block;
    }
  }

  .odTooltip {
    padding: 6px 12px;
    width: 180px;
    p {
      line-height: 16px;
    }
  }

  #primaryUserRecord {
    td {
      font-weight: 600;
      padding: 1px 0;
      background: #eaedef;
      -moz-box-shadow: inset 0 9px 5px -6px #fff, inset 0 -9px 5px -6px #fff;
      -webkit-box-shadow: inset 0 9px 5px -6px #fff, inset 0 -9px 5px -6px #fff;
      box-shadow: inset 0 9px 5px -6px #fff, inset 0 -9px 5px -6px #fff;
      span {
        height: 100%;
      }
    }
  }
}

.remove_account_dialog {
  .ui-dialog-title {
    font-weight: bold;
  }
  .ui-dialog-content {
    padding: $commonPadding * 4;
    color: #111;
    p {
      margin-bottom: $commonPadding * 2;
    }
    .note {
      @include font-size($baseFontSize - 3);
      color: #111;
      letter-spacing: -0.25px;
    }
    .bizName {
      padding-left: $commonPadding * 2;
    }
  }
}

.delete_row {
  background: #e6908e;
}

#accountLinkedSuccessMsg {
  width: 100%;
  .msg_blck {
    right: 0;
    &.slide_in {
      animation: slideFromRight .75s 1 forwards;
      -webkit-animation: slideFromRight .75s 1 forwards;

    }
    &.slide_out {
      animation: slideToRight .75s 1 forwards;
      -webkit-animation: slideToRight .75s 1 forwards;
    }
  }

  .alert_successz {
    background: transparent;
    opacity: 1;

    p {
      color: $green;
      margin-left: 30px;
      font-weight: bold;
    }
    .svg {
      padding: 4px;
      line-height: 20px;
      bottom: 2px;
      opacity: 1;
    }
  }

}

#removeErrorMsg , #loadMoreSection {
  p {
    color: $red;
  }
}

@keyframes slideToRight {
  from {
    right: 0%;
  }
  to {
    right: -100%;
  }
}

@keyframes slideFromRight {
  from {
    right: -100%;
  }

  to {
    right: 0%;
  }
}

.w20 {
  width: 20%;
}
.w23 {
  width: 23%;
}
.w30 {
  width : 30%;
}