// 电子健康卡
.electronic-health-card {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  .binding-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 110px;
    overflow: auto;
    transition: all .5s;
  }

  .binding-card.top80 {
    top: 80px;
  }

  .binding-card.top0 {
    top: 0;
  }

  .space-carousel {
    padding: 16px;
    overflow: hidden;
  }

  .region-flex-basis {
    .am-list-extra {
      flex-basis: 60%
    }
  }

  .am-list-item .am-input-label {
    font-size: 14px;
    color: #333;
  }

  .am-list-item .am-list-line .am-list-content {
    font-size: 14px;
    color: #333;
  }

  .am-list-item .am-list-line .am-list-extra {
    font-size: 14px;
  }

  .am-list-item .am-input-control input {
    font-size: 14px;
    color: #999;
  }

  .title-p {
    font-size: 14px;
    line-height: 44px;
    height: 48px;
    color: #666;
    padding: 0 18px;
  }

  .the-patient {
    height: 50px;
    line-height: 50px;
    background: #fff;
    font-size: 14px;
    padding: 0 24px;
    color: #333;
    margin-bottom: 14px;
    cursor: pointer;

    .tp-button {
      // display: inline-block;
      float: right;
      height: 30px;
      line-height: 30px;
      width: 140px;
      border-radius: 14px;
      background: #0079fe;
      margin-top: 10px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-bottom: 14px;
    }
  }

  .tab-content {
    width: 100%;
    height: 270px;
    padding-top: 20px;
    text-align: center;
    background: #fff;

    img {
      width: 220px;
      height: 220px;
    }

    p {
      font-size: 14px;
      color: #999;
      text-align: center;
    }
  }

  .basc-info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    padding: 7px 14px;
    background: #fff;

    &>div {
      height: 40px;
      line-height: 40px;

      .float-right {
        float: right;
        color: #999;
      }

      .span-bottom {
        border: 1px solid #0b7ffe;
        height: 26px;
        line-height: 26px;
        padding: 0 6px;
        margin-top: 7px;
        color: #0079FE;
      }
    }
  }

  .more-info {
    color: #333;
    font-size: 14px;
    margin-top: 10px;
    background: #fff;
    height: 40px;
    padding: 0 14px;
    line-height: 40px;

    .float-right {
      float: right;
      color: #999;

      i {
        margin-left: 4px;
      }
    }
  }

  // 绑定电子健康卡
  .tabs-switch {
    height: 70px;
    line-height: 70px;
    background: #fff;
    padding: 0 24px;

    span {
      display: inline-block;
      width: 50%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #0e80fe;
      box-sizing: border-box;
      color: #3478F7;
      font-size: 12px;
    }

    .span-left {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    .span-right {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .span-active {
      color: #fff;
      background: #0079fe;
    }
  }

  .binding-footer {
    position: absolute;
    left: 0;
    bottom: 12px;
    color: #0079FE;
    font-size: 12px;
    width: 100%;
    margin-top: 12px;
    text-align: center;
    cursor: pointer;
  }

  .binding-form {

    .binding-form-tabs {
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 52px;
      background: #fff;
      display: flex;
      padding: 0 24px;
      box-sizing: border-box;
      align-items: center;

      span {
        flex: 1;
        display: inline-block;
        border: 1px solid #e5e5e5;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #999;
        position: relative;

        .triangle-line {
          display: inline-block;
          position: absolute;
          top: 4px;
          right: -8px;
          bottom: 0;
          z-index: 999;
          height: 22px;
          width: 22px;
          border-right: 1px solid #e5e5e5;
          border-top: 1px solid #e5e5e5;
          transform: rotate(45deg);
        }
      }

      .borderleft {
        border-left: 0;
      }

      .borderright {
        border-right: 0;
      }

      .binding-form-tabs-active {
        color: #0079FE;
      }
    }

    .form-two-base {
      padding: 12px;

      p:nth-of-type(1) {
        color: #FE9400;
        font-size: 14px;
        margin-bottom: 30px;
      }

      p:nth-of-type(2) {
        color: #666;
        font-size: 16px;
        line-height: 24px;
      }

      p:nth-of-type(3) {
        color: #ccc;
        font-size: 14px;
      }
    }
  }

  .form-agreement {
    padding: 0 18px 12px 18px;

    .form-checkbox {
      margin: 24px 0 12px 0;
    }

    .am-checkbox-agree {
      align-content: center;
      box-sizing: border-box;
      margin-left: 0;
    }

    .am-checkbox-agree .am-checkbox-agree-label {
      font-size: 14px;
      color: #999;
      line-height: 1.7;
    }
  }

  .my-radio .am-radio {
    padding: 2.5px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
  }

  // 已有本院就诊卡
  .right-list {
    margin-top: 10px;

    .am-input-label {
      margin-left: 15px;
    }
  }

  .select-input {
    .select {
      width: 28%;
      display: inline-block;
    }

    .input {
      width: 70%;
      display: inline-block;
    }

    .verification {
      .am-input-label {
        margin: 0;
      }

      input {
        margin-left: 10%;
      }

      .font12 {
        width: 100%;
      }
    }

    span {
      display: inline-block;
    }

    span:nth-of-type(1) {
      width: 25%;

      .am-list-extra {
        color: #333;
      }
    }

    span:nth-of-type(2) {
      width: 75%;

      .am-list-item.am-input-item {
        padding-left: 12px;
      }
    }

    .am-list-item .am-list-line .am-list-extra {
      flex-basis: 100%;
      // width: 50px;
      text-align: left;
    }
  }

  // 关联电子健康卡
  .cssociated-card {
    .mine-card {
      padding: 0 14px;
      height: 50px;
      line-height: 50px;
      margin-top: 18px;
      font-size: 18px;
      color: #666;

      span {
        float: right;
        color: #3478F7;
        cursor: pointer;
        font-size: 14px;
      }
    }

    .am-list-body {
      background: #f5f5f9;
    }

    .am-list-content {
      .list-title {
        font-size: 16px;
        color: #333;
      }

      .am-list-brief {
        font-size: 14px;
        color: #ccc;
      }
    }

    .list-item-extra {
      font-weight: 700;
      font-size: 14px;
      color: #0079FE;
    }
  }

  // 输入域大小
  .area-style {
    .am-list-item .am-list-line .am-list-extra {
      flex-basis: 70% !important;
    }
  }

  .operation-button {
    padding: 0 18px 12px;
  }

  .list-address {
    .am-input-error-extra {
      font-size: 14px;
      color: #888;
    }

    .am-list-content {
      text-align: right;
    }
  }

  .no-card {
    margin-top: 12px;
    line-height: 20px;
    background: #f5f4f4;
    color: #999;
    text-align: center;
    font-size: 14px;
  }

  .ehc-content {
    height: calc(~"100% - 175px");
    overflow: auto;
    padding: 0 18px;
    box-sizing: border-box;
  }

  .ehc-btn {
    padding: 12px 18px;
    box-sizing: border-box;
  }
}

// 绑卡成功
.successful-card-binding {
  .spe {
    width: 60px;
    height: 60px;
  }
}

.binding-footer {
  z-index: 0;
}

// 添加就诊人 --- 宝安人民医院
.new-add-patient {
  margin-top: 5px;

  .nap-btn {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    margin-top: 24px;
  }

  .nap-btn-guide {
    width: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    font-size: 14px;
    color: #108ee9;
  }
}

.am-modal-transparent.new-add-patient-modal {
  width: 90%;
}

.new-add-patient-modal {
  .am-modal-content {
    padding: 0;
    text-align: left;

    .am-modal-body {
      padding: 0;
    }
  }

  .new-add-patient-modal-content {
    padding: 12px;
  }

  .new-add-patient-modal-content h3 {
    font-size: 16px;
    color: #333;
  }

  .new-add-patient-modal-content p {
    font-size: 14px;
    color: #999;
    margin-bottom: 50px;
  }

  .new-add-patient-modal-content img {
    width: 100%;
    margin: 12px 0;
  }

  .am-button {
    border: 0 !important;
    border-radius: 0 0 6px 6px;
  }
}