.columns {
  gap: 0px;
  overflow: auto;
  max-width: calc(100% - 100px);
  white-space: nowrap;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding-top: 16px;
}
/* all column */
.columns .column {
  display: inline-block;
  width: 100px;
  gap: 8px;
  align-items: center;
  cursor: grab;
  background: #ffffff;
  border-radius: 2px;
  height: 100%;
  background-color: transparent;
  padding-top: 0px;
  position: relative;
  z-index: 1;
}
.columns .column:active {
  background-color: transparent;
  box-shadow: none;
}
.columns .column .column-delete {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f44336;
  cursor: pointer;
  transition: all 0.1s;
}
.columns .column .column-delete svg {
  fill: white;
  width: 65%;
  height: 65%;
}
.columns .column .column-delete:hover {
  background-color: #c6180b;
}
.columns .column .column-skeleton {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 70px;
}
.columns .column .column-skeleton .skeleton-item {
  width: 100%;
  height: 14px;
  background-color: #e6e6e6;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.columns .column .labelColumn {
  background-color: #ffffff !important;
  border: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.labelColumn-editable {
  text-overflow: unset !important;
}

.columns .column.warning .column-skeleton .skeleton-item {
  background-color: #e74b4b;
}
.columns .column.warning .labelColumn {
  background-color: #ffefef !important;
  color: #e74b4b;
}
.columns .column:not(.warning):active .labelColumn,
.columns .column:not(.warning):hover .labelColumn {
  background-color: #effeef !important;
  color: #6fbf71;
}
.columns .column:not(.warning):active .column-skeleton .skeleton-item,
.columns .column:not(.warning):hover .column-skeleton .skeleton-item {
  background-color: #6fbf71 !important;
}

/* column divider-column-frozen */
.columns .column.divider-column-frozen {
  width: 2px;
  background-color: #2096f3 !important;
  position: relative;
  z-index: 2;
}
.columns .column.divider-column-frozen .labelColumn,
.columns .column.divider-column-frozen .column-skeleton,
.columns .column.divider-column-frozen .column-delete {
  width: 0;
  padding: 0;
  color: transparent;
}
.columns .column.divider-column-frozen .labelColumn {
  background-color: #2096f3 !important;
  border-color: #2096f3 !important;
}
.columns .column.divider-column-frozen::after {
  width: 22px;
  height: 22px;
  padding-top: 3px;
  padding-left: 4px;
  border-radius: 50%;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  position: absolute;
  content: url("/images/icon-snowflake.svg");
  background-color: #2096f3;
}

/* column frozen */
.columns .column:has(~ .divider-column-frozen):not(.warning) .labelColumn {
  background-color: #eff8ff !important;
  color: #2196f3;
}
.columns
  .column:has(~ .divider-column-frozen):not(.warning)
  .column-skeleton
  .skeleton-item {
  background-color: #50b9f7 !important;
}
.columns
  .column:has(~ .divider-column-frozen):not(.warning):active
  .labelColumn,
.columns
  .column:has(~ .divider-column-frozen):not(.warning):hover
  .labelColumn {
  background-color: #dbeffe !important;
}
#change-columns-manually-dialog {
  z-index: 180;
  position: absolute;
  bottom: 0;
  left: 0;
  /* height: 100%; */
  width: 100%;
  background: rgb(33 33 43 / 80%) !important;

  border-radius: 4px;
}
#change-columns-manually-dialog .dialog-container {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 60px 30px 20px 30px;
  border-radius: 4px;
}

#customDialog {
  display: none;
  position: fixed;
  color: #000;
  top: 40%;
  left: 30%;
  background: #fff;
  padding: 20px;
}

.border-top-option {
  border-top: 1px solid #ccc; /* chỉnh màu, kiểu border theo ý thích */
  padding-top: 8px; /* thêm chút khoảng cách nếu cần */
}

.create-customized-column-input{
  font-family: inherit;
    font-size: inherit;
    width: 100%;
    resize: none;
    height: 40px;
    line-height: 250%;
    overflow: hidden;
    border: solid 2px gray;
    border-radius: 3px;
}

.create-customized-column-label{
  line-height: 24px;
  size: 20px;
  border-bottom: none;
  padding: none;
  border-bottom: none;
}

#customConfigurationDialog{
  z-index: 10000;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: white;
  padding: 25PX;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  box-shadow: 0 3.2px 7.2px 0 rgba(255, 255, 255, 0.3), 0 0.6px 1.8px 0 rgba(255, 255, 255, 0.3);
}

html[data-color-mode="dark"] #customConfigurationDialog {
  box-shadow: 0 3.2px 7.2px 0 rgba(255, 251, 251, 0.13), 0 0.6px 1.8px 0 rgba(255, 255, 255, 0.11);
  background: rgb(18 18 18);
}

#customConfigurationDialog label {
  font-weight: normal;
}

html[data-color-mode="dark"] #renameFieldDialog {
  box-shadow: 0 3.2px 7.2px 0 rgba(255, 251, 251, 0.13), 0 0.6px 1.8px 0 rgba(255, 255, 255, 0.11);
  background: rgb(18 18 18);
}

#renameFieldDialog label {
  font-weight: 600;
  color: #44546F;
}

html[data-color-mode="dark"] #renameFieldDialog label {
  color: #9fadbc;
}

.create-customized-column-wrap-button{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20px;
  gap: 15px;
}

.crate-custom-configuration-modal-wrapper{
  background: rgb(33 33 43 / 30%);
  height: 100%;
  z-index: 200;
  width: 100%;
  position: absolute;
}

.delete-customized-column-button {
  background-color: red;
  border-radius: 5px;
  cursor: pointer;
  flex-wrap: wrap;
  display: flex;
  align-content: center;
  padding: 0px 8px;
}

/* ---- end DIALOG DRAG DROP COLUMNS ---- */
#edit-column-settings-modal-content {
  height: calc(100% - 200px);
  @media screen and (max-width: 1800px) {
    height: calc(100% - 170px);
  }
}
#user-column-editor-section {
  height: calc(100% - 65px);
  position: relative;
  top: 80px;
}
#cannot-config-message {
  position: absolute;
  width: 100%;
  height: calc(100% - 16px);
  top: 16px;
  left: 0;
  display: flex;
  background-color: #00000052;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  font-size: 15px;
  font-weight: 600;
  gap: 20px;
}
#all-columns-wrapper {
  height: 100%;
  padding-top: 20px;
  @media screen and (max-width: 1800px) {
    padding-top: 0;
  }
}
.columns::-webkit-scrollbar {
  height: 8px;
}
.error-message {
  color: red;
  font-size: 12px;
}
.custom-option-content{
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 200%;
  max-width: 200px;
  font-size: 14px;
  padding-left: 5px;
}
#columns-settings-selector-helper {
  padding: 6px;
  padding-left: 15px;
  color: white;
  z-index: 7;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 30px;
  height: 6.5em;
  -webkit-line-clamp: 4;
}
.add-columns {
  margin-top: 16px;
  width: 100px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-surface-sunken, #f4f5f7);
  transition: all 0.2s;
}

.add-columns svg {
  fill: #b1b1b1;
}

#button-add-column:hover {
  background-color: #e0e1e2;
}
#button-add-column:active {
  background-color: #cfcfcf;
}

#change-columns-sidebar {
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  background-color: var(--ds-surface, #ffffff);
  border-left: 3px solid var(--ds-border, #091e4224);
  z-index: 180;
  padding: 30px;
  padding-top: 0;
  opacity: 0;
  width: 450px;
  transition: transform 0.6s ease, opacity 0.2s ease;
  transform: translateX(450px);
}
.close-change-column-sidebar {
  position: absolute;
  top: 38px;
  left: -12px;
  cursor: pointer;
  box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px,
    rgba(9, 30, 66, 0.08) 0px 2px 4px 1px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-surface-overlay, #ffffff);
  border-radius: 50%;
  transition: all 0.2s;
  z-index: 1;
  opacity: 0;
}
.close-change-column-sidebar:hover {
  opacity: 1;
}
#change-columns-sidebar:hover .close-change-column-sidebar {
  opacity: 1;
}
.close-change-column-sidebar svg {
  fill: var(--ds-text-subtle, #44546f);
}
.close-change-column-sidebar:hover {
  background-color: var(--ds-background-selected-bold, #4c9aff);
}
.close-change-column-sidebar:hover svg {
  fill: var(--ds-text-inverse, #ffffff);
}

#change-columns-sidebar .sidebar-title,
#shown-fields-title,
#hidden-configurable-app-fields-title,
#hidden-market-app-field-title,
#hidden-jira-fields-title,
#hidden-custom-fields-title, 
#hidden-app-fields-title {
  padding-top: 20px;
  padding-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-text-subtle, #344563);
}
#shown-fields-title {
  padding-top: 10px;
}
#shown-fields-title,
#hidden-jira-fields-title,
#hidden-configurable-app-fields-title,
#hidden-market-app-field-title,
#hidden-custom-fields-title,
#hidden-app-fields-title {
  padding-left: 3px;
}
#change-columns-sidebar .sidebar-title {
  text-align: center;
}
#change-columns-sidebar .fields {
  height: calc(100% - 110px);
  overflow: auto;
  margin-top: 30px;
}
#change-columns-sidebar .fields::-webkit-scrollbar {
  width: 8px;
}
#change-columns-sidebar .column-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0 3px 4px;
  transition: all 0.1s;
  color: var(--ds-text, #172b4d);
}
#change-columns-sidebar .column-item:hover {
  background-color: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
}
#change-columns-sidebar .column-item label {
  font-weight: 400;
  font-size: 13px;
  margin-bottom: 0;
}
#change-columns-sidebar .column-item aui-label {
  width: calc(100% - 60px);
}
#change-columns-sidebar .column-item aui-toggle {
  transform: scale(0.7);
}
#change-columns-sidebar .column-item aui-toggle .aui-toggle-view .aui-icon {
  color: white !important;
}

.reset-column-button,
.reset-column-button:focus {
  background: var(--ds-background-danger-bold, #ca3521);
  color: var(--ds-text-inverse, #ffffff);
  transition: all 0.1s;
  font-weight: 600;
  font-size: 13px;
  padding: 5px 12px 4px;
  height: unset;
}

.reset-column-button:hover {
  background: var(--ds-background-danger-bold-hovered, #ae2a19);
  color: var(--ds-text-inverse, #ffffff);
}

#change-columns-save-button {
  background-color: var(--ds-background-brand-bold, #0c66e4);
  color: var(--ds-text-inverse, #ffffff);
  font-size: 13px;
  padding: 5px 12px 4px;
  height: unset;
}
#change-columns-save-button:hover {
  color: var(--ds-text-inverse, #ffffff);
  background-color: var(
    --ds-background-brand-bold-hovered,
    rgba(0, 82, 204, 0.9)
  );
}
.columns-settings-select {
  padding: 0;
  width: 250px;
  border: 2px solid var(--ds-border-input, #f4f5f7);
  font-size: 13px;
  height: 100%;
  background-color: transparent;
  border: none;
  color: var(--ds-text, #172b4d) !important;
  outline: none !important;
}
.aui-popover.aui-layer:has(.aui-optionlist) {
  background-color: var(--ds-surface, #ffffff);
}
.aui-optionlist li {
  font-size: 13px;
  color: var(--ds-text, #172b4d) !important;
  margin: 0;
  padding: 10px;
  border-left: 3px solid transparent;
}
.aui-optionlist li:hover {
  border-left: 3px solid var(--border-saved-filter, #4caf50);
}
.aui-optionlist li.aui-select-active {
  background-color: var(
    --ds-background-neutral-subtle-hovered,
    #f5f5f5
  ) !important;
  border-left: 3px solid var(--border-saved-filter, #4caf50);
}
.aui-optionlist li[select="true"] {
  background-color: var(--backgroud-saved-filter, #f5f5f5) !important;
  color: var(--ds-text-accent-gray-bolder, black) !important;
  font-weight: 500;
  border-left: 3px solid var(--border-saved-filter, #4caf50);
}
.aui-optionlist li:hover {
  border-left: 3px solid var(--border-saved-filter, #4caf50);
}
#change-columns-close-button {
  font-size: 13px;
  background: var(--ds-background-neutral-subtle, none);
  color: white;
  padding: 5px 12px 4px;
  height: unset;
  font-weight: 600;
}
#change-columns-close-button:hover {
  background: var(--ds-background-neutral-subtle-hovered, #091e420f);
}

html[data-color-mode="dark"] #columns-settings-selector-helper {
  color: #b6c2cf;
}
html[data-color-mode="dark"] #change-columns-close-button svg {
  fill: #b6c2cf;
}
html[data-color-mode="dark"] .add-columns {
  border: 2px solid var(--ds-border-input, #dfe1e6);
  background: #1d2125;
}
html[data-color-mode="dark"] #button-add-column:hover {
  background: #2c3136;
}
html[data-color-mode="dark"] #button-add-column:active {
  background: #3c4248;
}
html[data-color-mode="dark"] #button-add-column svg {
  fill: #9fadbc;
}
html[data-color-mode="dark"] .columns .column .labelColumn {
  border: 1px solid var(--ds-border-input, #dfe1e6);
  background: #191b1f !important;
  color: #9fadbc;
}
html[data-color-mode="dark"]
  .columns
  .column:has(~ .divider-column-frozen)
  .labelColumn {
  background-color: #012745 !important;
  color: #94d0f4 !important;
}
html[data-color-mode="dark"]
  .columns
  .column:has(~ .divider-column-frozen):active
  .labelColumn,
html[data-color-mode="dark"]
  .columns
  .column:has(~ .divider-column-frozen):not(.warning):hover
  .labelColumn {
  background-color: #063d68 !important;
}
html[data-color-mode="dark"] .columns .column .column-skeleton .skeleton-item {
  background: #9fadbc;
}
html[data-color-mode="dark"] .columns .column:active .labelColumn,
html[data-color-mode="dark"] .columns .column:hover .labelColumn {
  background-color: #364536 !important;
  color: #88c28a;
}
html[data-color-mode="dark"]
  .columns
  .column.warning
  .column-skeleton
  .skeleton-item {
  background-color: #f85d5d;
}
html[data-color-mode="dark"] .columns .column.warning .labelColumn {
  background-color: #542f2f !important;
  color: #f85d5d !important;
}
html[data-color-mode="dark"] #cannot-config-message {
  background-color: #0000008a;
  color: #cfd9ee;
}
html[data-color-mode="dark"] .columns .column .column-delete {
  background: var(--ds-background-danger-bold, #ca3521);
}
html[data-color-mode="dark"] .columns .column .column-delete svg {
  fill: var(--ds-text-inverse, #ffffff);
}
html[data-color-mode="dark"] .columns .column .column-delete:hover {
  background: var(--ds-background-danger-bold-hovered, #ae2a19);
}
html[data-color-mode="dark"] #change-columns-manually-dialog {
  background: rgba(0, 0, 0, 0.8) !important;
}
html[data-color-mode="dark"] #change-columns-close-button {
  color: var(--ds-text, #172b4d);
}
.column-settings-selector{
  display: "flex";
  flex-direction: "column";
  background: var(--ds-border-input, #dfe1e6);
  border-radius: "5px";
  box-shadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px";
}

#renameFieldDialog {
  z-index: 200;
  width: 320px;
  background: white;
  position: absolute;
  border-radius: 4px;
  box-shadow: 0px 8px 12px 0px #091E4226;
}

.rename-field-dialog-body {
  padding: 16px 24px;
  box-shadow: 0px 0px 1px 0px #091E424F;
}

.rename-field-dialog-footer {
  display: flex;
  gap: 15px;
  padding: 16px;
  justify-content: flex-end;
  border-top: 1px solid var(--ds-border-input, #091e4224);
  box-shadow: 0px 0px 1px 0px #091E424F;
}

html[data-color-mode="dark"] .rename-field-dialog-footer {
  border-top: 1px solid #737373;
}

.rename-column-icon {
  position: absolute;
  top: 11px;
  cursor: pointer;
}

.column-name-tip {
  font-size: 12px;
  color: #626F86;
}

html[data-color-mode="dark"] .column-name-tip {
  color: #9fadbc;
}