tjdify/web/app/components/datasets/hit-testing/style.module.css

.container {
  @apply flex h-full w-full relative;
}
.container > div {
  @apply flex-1 h-full;
}
.leftDiv {
  @apply border-r border-gray-100 px-6 py-3 flex flex-col;
}
.rightDiv {
  @apply px-8 pt-[42px] pb-[26px] flex flex-col;
}
.titleWrapper {
  @apply flex flex-col justify-center gap-1 mb-5;
}
.title {
  @apply text-xl font-medium text-gray-900;
}
.desc {
  @apply text-sm font-normal text-gray-500;
}
.textarea {
  min-height: 96px;
  @apply border-none resize-none font-normal caret-primary-600 text-gray-700 text-sm w-full bg-gray-25 focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal !important;
}
.table {
  @apply text-[13px] text-gray-500;
}
.table td {
  @apply whitespace-nowrap overflow-hidden text-ellipsis;
}
.commonIcon {
  @apply w-3.5 h-3.5 inline-block align-middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.app_icon {
  background-image: url(./assets/grid.svg);
}
.hit_testing_icon {
  background-image: url(../documents/assets/target.svg);
}
.plugin_icon {
  background-image: url(./assets/plugin.svg);
}

.wrapper {
  @apply relative border border-primary-600 min-h-[200px] rounded-xl pt-3 pb-14 px-4 bg-gray-25;
}

.cardWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(284px, auto));
  grid-gap: 16px;
  grid-auto-rows: 216px;
}
.clockWrapper {
  border: 0.5px solid #eaecf5;
  @apply rounded-lg w-11 h-11 flex justify-center items-center;
}
.clockIcon {
  mask-image: url(./assets/clock.svg);
  @apply bg-gray-500;
}