.parts-management-header {
  width: 100%;
  height: 64px;
  padding: 12px 20px;
  border-radius: 24px 24px 0 0;
  border: 1px solid #c2cadb;
  border-bottom: 1px solid #d9dfec;
  background-color: #f5f6f8;
}

.parts-management-search-box-container {
  display: flex;
}

.short-bar {
  width: 1px;
  height: 16px;
  background-color: #cdcdcd;
}

.search-box-input-container {
  display: flex;
  gap: 8px;
}

.parts-management-table-container {
  z-index: 1;

  width: 100%;
  height: 832px;
  padding: 17px 20px 16px 20px;
  border: 1px solid #c2cadb;
  border-top: none;
  border-radius: 0 0 24px 24px;
  background-color: #fff;

  .table-primary {
    position: relative;
    outline: 1px solid var(--main-color-primary) !important;
    z-index: 100;
    background-color: rgba(0, 104, 255, 0.05);
  }

  .temporary-parts-container {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.56px;
    background: rgb(255, 76, 76, 0.1);

    .temporary-parts-text {
      color: #ff4c4c;
      margin-top: 8px;
      font-weight: 400;
      font-size: inherit;
    }
  }
}

.parts-management-table-container-2 {
  width: 100%;
  height: 848px;
  padding: 20px;
  border: 1px solid #c2cadb;
  border-radius: 0 24px 24px 24px;
  background-color: #fff;

  .table-primary {
    position: relative;
    outline: 1px solid var(--main-color-primary) !important;
    z-index: 100;
    background-color: rgba(0, 104, 255, 0.05);
  }

  .temporary-parts-container {
    background: rgb(255, 76, 76, 0.1);

    .temporary-parts-text {
      color: #ff4c4c;
      margin-top: 8px;
      font-weight: 400;
      font-size: inherit;
    }
  }
}

/* 카테고리 검색 */
.category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;

  width: 200px;
  height: 40px;

  padding: 0 16px;

  background-color: #fff;
  border: 1px solid #c2cadb;

  border-radius: 8px;

  transition-property: background-color, border-color;
  transition-duration: 0.3s;

  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.56px;
  color: #000000;

  &.category-btn--active {
    background-color: #0068ff1a;
    border-color: #0068ff;
  }
}

.category-modal {
  z-index: 19;

  position: absolute;

  display: none;

  max-height: 640px;

  background-color: #fff;

  border: 1px solid #0068ff;
  border-radius: 8px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);

  &.category-modal--active {
    display: flex;
  }

  & > .category-modal__content-wrapper {
    width: 140px;
    /* padding-right: 8px; */

    &:not(:last-of-type) {
      border-right: 1px solid #d9dfec;
    }

    & ul {
      width: 100%;
      max-height: 100%;

      overflow-y: auto;

      & > li {
        width: 100%;

        padding: 8px 8px 8px 16px;

        font-size: 13px;
        font-weight: 400;
        line-height: 15px;

        color: #5b6371;

        cursor: pointer;

        &.category-modal__item--active {
          background-color: #0068ff1a;
          color: #0068ff;

          &:hover {
            background-color: #f2f7ff;
          }
        }

        &:hover {
          background-color: #f2f7ff;
        }
      }
    }

    & > .category-modal__message {
      display: flex;
      align-items: center;

      height: 100%;

      font-weight: 400;
      font-size: 13px;

      line-height: 15px;
      letter-spacing: -0.52px;
      word-break: keep-all;

      text-align: center;

      color: #5b6371;
    }
  }
}

/* for popups */
.popup-search-container.popup-search-container--parts-integration {
  justify-content: flex-end;

  padding-right: 24px;
}