.detail-container {
  width: 100%;
  padding: $space-default;
  @include box-sizing();
  min-width: 1000px;

  .detail-content {
    width: 100%;

    .detail-box {
      display: block;
      background: white;
      padding: $space-mini $space-default $space-default $space-default;
      @include box-sizing();

      .detail-header {
        @include box();
        @include flex-justify-between();
        padding-bottom: $space-mini;
        border-bottom: 1px solid #F3F6FB;

        .detail-header-title {
          @include box();
          @include flex-center();
          color: $color-text-regular;
          font-size: $font-default;

          .icon {
            margin-right: $space-mini;
            color: $color-primary;
            font-size: $font-default;
          }

        }
      }

      .detail-info {
        font-size: $font-small;

        .icon {
          font-size: $font-small;
        }

        .detail-info-item {
          @include box();
          @include flex-align-center();
          padding: $space-mini 0;
          @include box-sizing();

          &:nth-child(even) {
            background: $color-table-bg;
          }

          .detail-info-label {
            color: $color-text-regular;
            width: 90px;
          }

          .detail-info-value {
            @include box();

            @include flex();
            word-break: break-all;
          }

          > .icon {
            padding: 0 $space-mini;
          }
        }
      }
    }
  }
}

// 右侧栏
.right-panel {
  width: 410px;
  height: -webkit-calc(100% - 55px);
  height: -moz-calc(100% - 55px);
  height: calc(100% - 55px);
  position: fixed;
  right: 0;
  top: 55px;
  background: white;
  padding: $space-default;
  box-shadow: -4px 0 10px rgba(0, 0, 0, .07);
  z-index: 400;
  font-size: 12px;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  color: #555;

  & .right-panel-title {
    @include box();
    @include flex-justify-between();
    padding: 0 $space-default;
    border-bottom: 1px solid #ddd;
    margin: -20px -20px 0 -20px;
    line-height: 50px;
    height: 50px;
    font-size: $font-medium;
  }

  & .small-title {
    font-size: $font-medium;
    margin: $space-mini 0;
  }

  & .right-panel-row {
    @include box();
    @include flex-justify-between();
    //padding: $space-xs 0;
    border-bottom: 1px solid #f5f6f8;
    height: 34px;
    @include box-sizing();
    line-height: 34px;

    & .icon {
      font-size: $font-small;
    }
  }

  .text-muted,.efly-button {color: #888}
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}


.info-container {

  .info-content {
    width: 100%;
    padding: $space-default;
    @include box-sizing();

    .info-box {
      width: 100%;
      background: $color-white;
      padding: 0 $space-default $space-default $space-default;
      @include box-sizing();

      .info-detail {
        .info-title {
          @include box();
          @include flex-align-center();
          width: 100%;
          height: 40px;
          border-bottom: 1px solid $color-border-base;
        }

        .info-detail-content {
          .info-item {
            @include box();
            margin-top: $space-default;

            .info-item-label {
              width: 100px;
              line-height: $height-small;
            }
          }

          .info-detail-box {
            width: 400px;
            height: 100px;
            border: 1px solid #e9ecf1;
            background: #f9f9f9;
            padding: $space-small;
          }

          .info-detail-row {
            @include box();
            @include flex-justify-between();
            @include flex-align-center();
            height: 70px;
            width: 100%;
            border-bottom: 1px solid $color-border-base;
            font-size: $font-small;

            .icon{
              font-size: $font-small;
            }

            &:last-child {
              border-bottom: 0;
            }

            .info-detail-row-label {
              width: 150px;
            }

            .info-detail-row-text {
              flex: 1;
              @include box();
              @include flex-align-center();
            }

            .info-detail-row-right {
              width: 200px;
            }
          }

        }
      }
    }
  }

  .info-footer {
    position: fixed;
    width: calc(100% - 204px);
    background: $color-white;
    bottom: 0;
    right: 0;
    padding: $space-default;
    @include box-sizing();
  }
}
.efly-button.efly-button-auto.btn-primary:not(.disabled):hover {color:#fff!important;}