detail-data-record {
  display: block;

  .popover-content {
    max-width: 250px;
    word-break: break-word;
  }

  .storage-status-1, .storage-status-3, .storage-status-6, .storage-status-7 {
    color: var(--global-theme-color-heavy, #00C2B1);
  }

  .storage-status-0, .storage-status-4 {
    color: #FF8C8C;
  }

  .detail-content {
    display: flex;

    .detail-info {
      flex: 2;
      min-width: 290px;
      background: white;
      margin: 0 16px 16px 0;
      border-radius: 5px;
      padding: 20px;

      .detail-cfg {
        border-radius: 5px;
        border: 1px solid #00bbb4;

        &:last-child {
          margin-top: 27px;
        }
      }

      .small-menu {
        min-width: 60px;
        text-align: center;
      }
    }

    .info-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      background: #00bbb4;
      color: white;
      padding-left: 23px;

      .btn-nav {
        background: #00bbb4;
      }
    }

    .no-nav {
      justify-content: flex-start;
      height: 34px;
    }

    .cfg-content {
      padding: 0 23px;

      .cfg-item {
        margin-top: 5px;
        padding: 3px 6px;

        &:not(:last-child) {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #D0D0D0;
        }
      }

      .cfg-dife-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .cfg-app {
        background: #F8F8F8;
        padding: 10px 18px;
        margin-top: 5px;
        border-radius: 2px;
      }
    }

    .detail-data {
      flex: 7;
      min-width: 680px;
    }
  }

  .box-tab {
    position: relative;

    .data-header {
      display: flex;
      position: absolute;
      right: 12px;
      top: 4px;
      z-index: 999;
    }

    .search-input-box {
      width: 100px;
      box-sizing: border-box;
      display: inline-block;
      transition: width .5s;
      border-radius: 2px 0 0 2px;
      border-right: none;

      &:focus {
        width: 250px;
      }
    }

    .search-not {
      width: 250px;
    }

    .btn-xs {
      padding: 6px 10px;
      border-radius: 0 2px 2px 0;
    }
  }
}