.risk-list {
  .risk-list-content {
    height: calc(100vh - var(--header-height) - 97px - 48px);
    display: flex;
    .type-nav-container {
      width: 310px;
      padding: 8px 0 8px 8px;
      .type-nav-box {
        height: 100%;
        border-radius: 10px 0px 0px 15px;
        border: 1px solid #e5e5e5;
        overflow: hidden;
      }
    }
    .list-wrapper {
      flex: 1;
      height: 100%;
      .list-container {
        height: calc(100% - 86px);
        overflow: auto;
        transition: all 0.3s;
        &.half {
          height: calc(50% - 32px);
        }
        .card-list {
          @apply grid grid-cols-4 gap-4 px-4 pb-4;
        }
        // background-color: aqua;
      }
      .detail-container {
        height: 0px;
        display: flex;
        overflow-y: auto;
        background-color: #fff;
        transition: all 0.3s;
        &.half {
          border-top: 1px solid rgba(151, 151, 151, 0.24);
          height: calc(50% - 56px);
        }
        .info {
          width: calc(50% - 2px);
          border-right: 1px solid rgba(151, 151, 151, 0.24);
          height: 100%;
          overflow-y: auto;
          padding: 24px;
        }
        .control {
          width: calc(50% - 1px);
          height: 100%;
        }
      }
    }
  }
}

.list-item-card {
  box-shadow: 0px 2px 4px 2px rgba(53, 53, 53, 0.1);
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 16px 0 32px 16px;
  transition: border 0.3s;
  cursor: pointer;
  &:hover {
    border: 1px solid #2953e830;
  }
  &.active {
    border: 1px solid var(--deep-blue);
  }
  .card-header {
    @apply flex justify-between items-center;
    line-height: 31px;
    .title {
      @apply text-base font-medium line-clamp-1;
      font-size: 16px;
    }
    .level {
      box-shadow: 0px 1px 4px 0px rgba(187, 187, 187, 0.5);
      border-radius: 16px 0px 0px 16px;
      backdrop-filter: blur(1.838235294117647px);
      height: 31px;
      width: 80px;
      font-weight: 500;
      font-size: 14px;
      text-align: center;
    }
  }
  .description {
    @apply text-sm text-gray-500 line-clamp-2 pt-3 pr-4;
    color: #666666;
  }
}
