.custom-table-column-modal { .ant-modal-body { .modal-body { height: 504px; border-radius: 8px; border: 1px solid var(--BG-300, #e6e6e8); display: flex; flex-direction: row; .left { flex: 1; padding: 20px; border-right: 1px solid #eee; overflow-y: auto; .group-item { .title-row { border-radius: 4px; background: var(--BG-100, #f7f8fa); display: flex; height: 44px; padding: 0px 12px; align-items: center; margin-bottom: 16px; .text { color: var(--Text-1, #211f24); font-family: $font-family-medium; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } } .fields { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } &:not(:last-child) { margin-bottom: 24px; } } } .right { width: 280px; padding: 16px 12px; display: flex; flex-direction: column; .checked-title { color: var(--Text-1, #211f24); font-family: $font-family-medium; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; .count { font-weight: 500; } } .checked-list { flex: 1; overflow-y: auto; .checked-item { cursor: move; border-radius: 4px; background: var(--BG-100, #f7f8fa); display: flex; height: 32px; padding: 0px 12px; align-items: center; .text { color: var(--Text-1, #211f24); font-family: $font-family-medium; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; /* 157.143% */ } &:not(:last-child) { margin-bottom: 12px; } } .draggable-list { min-height: 40px; } } } } } .arco-modal-footer { } }