impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Table/Table.styles.scss

@@ -1,3859 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-basic-table-layout.table-v32 {
-  position: relative;
-
-  --ag-border-color: #c3c8d4;
-  --ag-range-selection-background-color-1: #eceefd;
-  --ag-range-selection-border-color: #4259ee;
-  .ag-cell-range-single-cell {
-    border-right-color: var(--ag-range-selection-border-color) !important;
-  }
-
-  font-family: $fontFamily;
-  > div {
-    margin-bottom: 20px;
-    &.hide-margin-bottom {
-      margin-bottom: 0;
-    }
-  }
-  .comment-mode .ag-row .ag-cell.default-cell,
-  .comment-mode .ag-row .ag-cell.cell-renderer {
-    cursor: url("../../assets/comment-cursor.svg") 12 12, auto !important;
-  }
-
-  .ag-header-row {
-    overflow: visible;
-  }
-  .ag-header-group-cell .ag-header-cell-comp-wrapper {
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ag-body-viewport {
-    max-height: var(--ag-grid-height);
-    overflow: auto;
-    scrollbar-width: none !important;
-  }
-
-  .ag-body-viewport::-webkit-scrollbar:vertical,
-  .ag-center-cols-viewport::-webkit-scrollbar:vertical {
-    display: block !important;
-  }
-
-  // Override AG Grid's default min-height when custom height is provided
-  &.custom-height-override {
-    .ag-center-cols-viewport {
-      min-height: unset !important;
-    }
-
-    .ag-body-viewport {
-      height: var(--ag-grid-height) !important;
-      max-height: none !important;
-    }
-
-    // Dynamic row height classes based on content
-    .ag-center-cols-viewport {
-      &.list-row-with-image {
-        height: 72px !important;
-        min-height: 72px !important;
-        max-height: 72px !important;
-      }
-
-      &.list-row-without-image {
-        height: 48px !important;
-        min-height: 48px !important;
-        max-height: 48px !important;
-      }
-    }
-  }
-
-  .comment-panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    border-bottom: 1px solid #d9dde7;
-
-    h2 {
-      font-weight: 600;
-      font-size: 16px;
-      color: #0d152c;
-      margin: 0;
-    }
-
-    .close_icon {
-      cursor: pointer;
-      // Add styles for your close icon, e.g., background-image, width, height
-    }
-  }
-
-  .comment-panel-search-panel {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0px 12px;
-    .left-input-icon {
-      padding-top: 2px;
-    }
-    .ia-styles.ia-btn.ia-btn-small {
-      padding: 14px !important;
-    }
-    .impact_inputbox_container_with_icons {
-      width: 279px;
-    }
-  }
-
-  .comment-panel-content {
-    padding: 8px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    line-height: 20px;
-    overflow: auto;
-    position: absolute;
-    top: 40px;
-    bottom: 0;
-    overflow: auto;
-    left: 0;
-    right: 0;
-  }
-
-  .comment-panel-item {
-    padding: 16px;
-    background-color: transparent;
-    cursor: pointer;
-    position: relative;
-
-    // Create an 8px-1px-8px separation between items
-    &:not(:last-child) {
-      margin-bottom: 16px; // total spacing between items
-
-      &::after {
-        content: "";
-        position: absolute;
-        left: 16px; // align with padding
-        right: 16px; // align with padding
-        height: 1px;
-        background: #d9dde7;
-        bottom: -8px; // centered in the 16px margin to give 8px on each side
-      }
-    }
-
-    &.active {
-      background-color: #eceefd;
-      border-radius: 16px;
-    }
-  }
-
-  .comment-panel-item-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 12px;
-
-    .comment-panel-item-header-left {
-      display: flex;
-      align-items: flex-start;
-      gap: 8px;
-    }
-
-    .comment-panel-author-info {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-
-      span:first-child {
-        font-weight: 600;
-        font-size: 14px;
-        color: #31416e;
-        line-height: 21px;
-      }
-
-      span:last-child {
-        font-weight: 500;
-        font-size: 12px;
-        color: #60697d;
-        line-height: 16px;
-      }
-    }
-
-    .comment-panel-item-header-right {
-      display: flex;
-      align-items: baseline;
-      .comment-panel-action-icon {
-        padding: 8px;
-      }
-      .comment-panel-action-button {
-        padding: 8px;
-        background-color: transparent;
-      }
-    }
-  }
-
-  .comment-panel-item-content {
-    font-weight: 500;
-    font-size: 14px;
-    color: #1f2b4d;
-    line-height: 20px;
-    // Clamp to 3 lines with ellipsis
-    display: -webkit-box;
-    /* Standard property for newer browsers */
-    line-clamp: 3;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    max-height: calc(20px * 3);
-  }
-
-  .comment-panel-item-footer {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #4259ee; // Link color
-    cursor: pointer;
-    // padding-left: 16px;
-  }
-
-  .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
-    height: calc(min(var(--ag-line-height, 40px), 40px) - 2px);
-  }
-
-  & [data-type="pagination-btn"] {
-    position: static !important;
-    bottom: 12px;
-    padding: 0;
-    justify-content: space-around;
-    min-width: 125px;
-
-    &:focus {
-      outline: none !important;
-      border-color: #3649c6 !important;
-    }
-
-    &:hover {
-      background-color: transparent !important;
-      color: black !important;
-    }
-
-    &[data-collapsed="true"] {
-      svg {
-        rotate: 180deg;
-      }
-    }
-
-    svg {
-      height: 16px !important;
-      width: 16px !important;
-      // margin: 0 0 0 20px !important;
-    }
-  }
-
-  // .footer-button-with-bottom-options {
-  //   & [data-type="pagination-btn"] {
-  //     bottom: 61px;
-  //   }
-  // }
-
-  // .card-container.footer-button-with-bottom-options {
-  //   & [data-type="pagination-btn"] {
-  //     bottom: 73px;
-  //   }
-  // }
-
-  .ag-root-wrapper {
-    border-top: none;
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-
-    &::before {
-      content: "";
-      display: block;
-      width: 100%;
-      height: 1px;
-      background: var(--ag-border-color);
-      position: absolute;
-      top: 0px;
-      z-index: 1;
-      left: 0;
-    }
-  }
-
-  .ag-root {
-    border-left: 1px solid #d9dde7;
-    border-right: 1px solid #d9dde7;
-    border-bottom: 1px solid #d9dde7;
-  }
-  .ag-aria-description-container {
-    display: none !important;
-  }
-
-  .ag-header {
-    background: $textButtonPrimaryBg;
-    border-bottom: none;
-  }
-
-  .ia-icon-div {
-    display: none;
-    gap: 12px;
-    // visibility: hidden;
-    position: relative;
-    z-index: 999;
-    align-items: center;
-
-    &.has-active-search {
-      display: flex;
-    }
-    .MuiBadge-badge.MuiBadge-dot {
-      background: $primaryColor !important;
-    }
-  }
-
-  .ag-header-cell:hover {
-    .with-icons {
-      .ag-header-cell-text {
-        width: calc(100% - 50px);
-        transition: width 0.3s ease-in-out;
-      }
-
-      .ia-icon-div {
-        display: flex;
-      }
-    }
-  }
-
-  .ag-header-cell,
-  .ag-header-group-cell {
-    border-right: 1px solid $deactivateColor !important;
-
-    .ag-checkbox {
-      position: relative;
-      left: -6px;
-    }
-  }
-
-  .ag-checkbox-input-wrapper input {
-    cursor: pointer;
-  }
-
-  .ag-header-cell:last-child,
-  .ag-header-group-cell:last-child {
-    border-right: none;
-  }
-  .ag-row-compact {
-    height: 30px !important;
-  }
-  .ag-ltr {
-    .ag-cell {
-      border-right: 1px solid $disabledSecondaryBorder !important;
-      padding: 0 16px;
-      color: $mainFontColor;
-      border: none;
-      line-height: var(--ag-line-height);
-      &:last-child {
-        border-right: none;
-      }
-      &[col-id="Selection"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-      }
-    }
-    .cell-renderer {
-      display: grid;
-      align-items: center;
-    }
-  }
-
-  .ag-popup-child[aria-label="SubMenu"] {
-    .ag-icon::before {
-      position: relative;
-      left: -10px;
-    }
-  }
-
-  .ag-row-odd {
-    background: $whiteColor;
-  }
-  .ag-row-hover {
-    background-color: $lightBlueColor;
-    &:not(.ag-full-width-row)::before {
-      background-color: transparent !important;
-      background-image: none !important;
-    }
-  }
-  .ag-ltr {
-    .ag-has-focus {
-      border: none;
-    }
-  }
-  .ag-pinned-left-cols-container {
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-    z-index: 1 !important;
-    border-right: 1px solid $disabledSecondaryBorder;
-    .ag-row {
-      border-right: none;
-    }
-  }
-  .ag-pinned-right-cols-container {
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px 0px !important;
-    z-index: 1 !important;
-    border-left: 1px solid $disabledSecondaryBorder;
-    .ag-row {
-      border-left: none;
-    }
-    .ag-cell {
-      border-left: none !important;
-    }
-  }
-  .ag-header-icon {
-    .ag-icon::before {
-      cursor: pointer;
-    }
-
-    .ag-icon-menu {
-      &::before {
-        background: url("../../assets/menu-table.svg") no-repeat;
-        background-size: 20px;
-        display: block;
-        height: 20px;
-        width: 20px;
-        content: " ";
-        background-position: 8px 0px;
-      }
-    }
-    &.ag-header-expand-icon {
-      .ag-icon::before {
-        display: block;
-        content: " ";
-        height: 32px;
-        width: 32px;
-        right: -16px;
-        position: absolute;
-        top: -10px;
-        background: url(./../../assets/accordion-chevron.svg) no-repeat;
-        background-position: 8px 0px;
-      }
-      .ag-icon-expanded::before {
-        z-index: 1;
-        display: block;
-        content: " ";
-        height: 32px;
-        width: 32px;
-        right: 6px;
-        position: absolute;
-        top: -6px !important;
-        transform: rotate(90deg);
-      }
-      .ag-icon-contracted::before {
-        rotate: -90deg;
-      }
-    }
-  }
-
-  .ag-header-cell[aria-sort="none"] {
-    .ag-header-cell-text.sortable {
-      .ia-table-sort-icon {
-        // visibility: hidden;
-        display: none;
-      }
-      &:hover {
-        .ia-table-sort-icon {
-          // visibility: visible;
-          display: block;
-        }
-      }
-    }
-  }
-
-  .ag-header-cell[aria-sort="ascending"] {
-    .ia-table-sort-icon {
-      // visibility: visible;
-      display: block;
-    }
-  }
-
-  .ag-header-cell[aria-sort="descending"] {
-    .ia-table-sort-icon {
-      // visibility: visible;
-      display: block;
-    }
-  }
-
-  //Checkbox scss for table starts
-  .ag-checkbox-input-wrapper {
-    &::after {
-      content: " ";
-      border: 1px solid #c3c8d4;
-      width: 16px;
-      height: 16px;
-      border-radius: 4px;
-    }
-    &:hover {
-      &::after {
-        content: " ";
-        border: 1px solid $primaryColor;
-        width: 16px;
-        height: 16px;
-        border-radius: 4px;
-      }
-    }
-  }
-  .ag-checked {
-    &::after {
-      content: " " !important;
-      background: $lightBlueColor url("../../assets/tick.svg") no-repeat;
-      background-size: 10px;
-      background-position: center;
-      border: 1px solid $primaryColor;
-    }
-  }
-  .ag-checkbox-input-wrapper:focus-within,
-  .ag-checkbox-input-wrapper:active {
-    box-shadow: none;
-  }
-  .ag-checkbox-input-wrapper.ag-indeterminate::after {
-    background: $lightBlueColor url("../../assets/checkbox-dash.svg") no-repeat !important;
-    border: 1px solid $primaryColor !important;
-    background-position: center !important;
-    content: "";
-  }
-  .ag-row-selected {
-    background-color: $lightBlueColor;
-    border-bottom: 1px solid $accordionBgBackground !important;
-    &::before {
-      background-color: $lightBlueColor !important;
-    }
-    .ag-cell-range-selected-1:not(.ag-cell-inline-editing) {
-      background-color: $lightBlueColor;
-    }
-  }
-  .ag-row {
-    border-color: #d9dde7;
-  }
-  .ag-selection-checkbox {
-    position: relative;
-    margin: 0;
-  }
-  .ag-row-footer {
-    background: $tableTotalBgColor;
-    font-weight: $semiBoldFontWeight;
-    .ag-selection-checkbox {
-      margin-right: 0;
-    }
-  }
-
-  .ag-header-cell-resize::after,
-  .ag-header-group-cell-resize::after {
-    left: 5px !important;
-    top: 39px !important;
-    width: 1px;
-    background-color: $deactivateColor;
-  }
-  .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) {
-    border: 1px solid transparent !important;
-    background: $lightBlueColor;
-  }
-  .ag-details-row {
-    padding: 17px 30px;
-  }
-  .ag-tabs-header {
-    display: none;
-  }
-  .ag-menu {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25) !important;
-    border: none;
-    z-index: 99999;
-    // &:hover {
-    //   .ia-icon-div {
-    //     // visibility: visible;
-    //   }
-    // }
-  }
-  .ag-ltr .ag-menu-option-icon {
-    width: 10px;
-    padding-left: 0px;
-  }
-  [aria-label="Context Menu"].ag-menu-option-icon {
-    padding-left: 12px;
-  }
-  .settings-main-container {
-    background: url("../../assets/setting-table.svg") no-repeat;
-    background-position: 0 center;
-    width: 14px;
-    height: 14px;
-    padding-left: 20px;
-    color: $mainFontColor;
-    font-size: 12px;
-    font-weight: $normalFontWeight;
-    background-position: 16px center;
-    .ag-menu-option-text {
-      padding-left: 24px;
-    }
-  }
-  .ag-menu-separator {
-    display: none;
-  }
-  .ag-menu-option-active {
-    background-color: $whiteColor;
-  }
-  .format-main-container > span {
-    border-top: 1px solid #efefef;
-  }
-  .format-main-container {
-    background: url("../../assets/format-icon.svg") no-repeat;
-    width: 14px;
-    height: 14px;
-    padding-left: 20px;
-    color: $mainFontColor;
-    font-size: 12px;
-    font-weight: $normalFontWeight;
-    background-position: 16px center;
-    background-size: 11px;
-    .ag-menu-option-text {
-      padding-left: 24px;
-    }
-  }
-  .ag-icon-small-right::before {
-    content: " ";
-    background: url("../../assets/accordion-chevron.svg") no-repeat;
-    background-size: 12px;
-    width: 16px;
-    height: 16px;
-    display: block;
-    transform: rotate(-90deg);
-  }
-  .ag-menu-option {
-    .ag-icon-tick {
-      padding-left: 16px;
-    }
-    &:not(
-        .ag-menu-option-disabled,
-        .format-main-container,
-        .settings-main-container
-      ):hover {
-      cursor: pointer;
-    }
-  }
-  .ag-menu-list {
-    padding-bottom: 10px;
-  }
-  .ag-header-icon {
-    .ag-icon-menu {
-      display: none;
-    }
-  }
-
-  .ag-header-cell:hover {
-    .ag-header-icon {
-      .ag-icon-menu {
-        display: block;
-      }
-    }
-  }
-
-  .editable-ag-cell {
-    background-color: #eceefd;
-  }
-
-  .ag-cell-inline-editing {
-    padding: 0 !important;
-    height: var(--ag-line-height);
-    border-radius: 6px;
-    border: 2px solid #b3bdf8 !important;
-
-    .ag-text-field-input {
-      border: none;
-    }
-  }
-
-  .custom-ag-header-container {
-    flex-grow: 1;
-    gap: 12px;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: var(--ag-header-flex-direction, "row");
-    justify-content: space-between;
-    align-items: center;
-
-    & .menu-visible {
-      display: flex;
-    }
-
-    .ag-header-cell-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: 21px !important;
-      font-size: 14px;
-      font-weight: 700;
-    }
-
-    &.checkbox-selection {
-      .ag-header-cell-text {
-        width: 100% !important;
-        justify-content: center;
-        .impact-form-checkbox-container .MuiCheckbox-root.impact-checkbox-container {
-          margin-right: 0;
-        }
-      }
-      .ia-icon-div {
-        display: none !important;
-      }
-    }
-
-    .custom-ag-header-icons {
-      display: flex;
-
-      button {
-        border: none;
-        background-color: transparent;
-        cursor: pointer;
-        display: block;
-        padding: 0;
-      }
-
-      .custom-ag-menu-icon-button {
-        background: url("../../assets/menu-table.svg") no-repeat;
-        background-size: 20px;
-        height: 18px;
-        width: 18px;
-        background-position: 0px 0px;
-      }
-    }
-    .header-wrap-enabled {
-      .header-text-content {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        white-space: break-spaces;
-        line-height: 18px !important;
-      }
-    }
-  }
-
-  .ag-center-cols-viewport::-webkit-scrollbar {
-    display: none;
-  }
-
-  .ag-header-row .ag-header-cell,
-  .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group {
-    border-top: 1px solid $destructiveSecondaryBg !important;
-    overflow: visible;
-  }
-
-  // Remove border-top when inside list-mode
-  &.list-mode-enabled .ag-header-row .ag-header-cell,
-  &.list-mode-enabled
-    .ag-header-row
-    .ag-header-group-cell.ag-header-group-cell-with-group {
-    border-top: none !important;
-  }
-
-  .span-2 {
-    top: -40px;
-    height: 80px;
-  }
-
-  .span-3 {
-    top: -80px;
-    height: 120px;
-  }
-
-  .span-4 {
-    top: -120px;
-    height: 160px;
-  }
-
-  .span-5 {
-    top: -160px;
-    height: 200px;
-  }
-
-  .span-6 {
-    top: -200px;
-    height: 240px;
-  }
-
-  .select-container {
-    .select-button {
-      background: #eceefd;
-      color: $mainFontColor;
-      border-radius: 0px;
-    }
-  }
-
-  .input-container {
-    input {
-      background: #eceefd;
-      color: $mainFontColor;
-      border-radius: 0px;
-
-      &:focus {
-        background: $whiteColor;
-        border: none;
-      }
-    }
-  }
-
-  .number-cell {
-    display: flex;
-    flex-direction: row-reverse;
-
-    .ia-icon-div {
-      flex-direction: row-reverse;
-    }
-
-    &.cell-renderer {
-      .impact-input-wrapper {
-        font-size: inherit !important;
-        .MuiInputBase-root {
-          font-size: inherit !important;
-          input.MuiInputBase-input {
-            font-size: inherit !important;
-          }
-        }
-      }
-      .impact_inputbox_container .MuiInputBase-root input.MuiInputBase-input {
-        text-align: right;
-        min-width: 0px;
-      }
-
-      .impact_inputbox_container_with_icons
-        .impact-input-wrapper
-        .MuiInputBase-root
-        input.MuiInputBase-input {
-        text-align: right;
-      }
-
-      .impact_inputbox_container_with_icons .impact-input-wrapper {
-        min-width: 0px;
-      }
-    }
-
-    .custom-ag-header-container {
-      flex-direction: row-reverse;
-      text-align: right;
-
-      .ag-header-cell-text {
-        background-position: center left !important;
-        // padding-left: 16px;
-        padding-right: 0 !important;
-        flex-direction: row-reverse;
-      }
-    }
-  }
-
-  // Pagination code starts here
-  .ag-paging-panel {
-    border: none;
-    height: 54px;
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-    padding: 12px 6px 12px 6px;
-  }
-
-  // .ag-paging-page-summary-panel {
-  //   .ag-paging-button[aria-label="First Page"] {
-  //     display: none
-  //   }
-  //   .ag-paging-button[aria-label="Last Page"] {
-  //     display: none
-  //   }
-  //   .ag-paging-description {
-  //     display: none
-  //   }
-  // }
-
-  .ag-paging-description {
-    color: $darkColor;
-    font-weight: 700;
-  }
-
-  .ag-paging-page-size {
-    display: none;
-  }
-
-  .ag-paging-row-summary-panel {
-    // border: 1px solid #c3c8d4;
-    padding-inline: 12px;
-    height: 32px;
-    box-sizing: border-box;
-    border-radius: 6px 0 0 6px;
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    margin: 0px;
-    color: $textButtonFontColor;
-    font-weight: 500;
-  }
-
-  .ag-paging-page-summary-panel {
-    // border: 1px solid #c3c8d4;
-    min-width: 48px;
-    height: 32px;
-    margin: 0px !important;
-    margin-right: 14px !important;
-    border-left: 0px;
-    border-radius: 0 6px 6px 0;
-  }
-
-  .ag-paging-row-summary-panel-number {
-    font-weight: 500;
-  }
-
-  .ag-paging-number {
-    font-weight: 700;
-  }
-
-  .ag-paging-button {
-    background-color: unset !important;
-    color: $textButtonFontColor;
-  }
-
-  .ag-paging-button.ag-disabled {
-    color: $lightGrayColor;
-  }
-
-  .ag-icon-first {
-    color: inherit;
-  }
-
-  .ag-icon-previous {
-    color: inherit;
-  }
-
-  .ag-icon-next {
-    color: inherit;
-  }
-
-  .ag-icon-last {
-    color: inherit;
-  }
-
-  .ia-pageSize {
-    font-size: 12px;
-    font-weight: 400;
-  }
-
-  .ag-label {
-    display: none;
-  }
-
-  .ag-picker-field-wrapper {
-    display: none;
-  }
-
-  .impact-table-main-container {
-    background: $whiteColor;
-    font-family: $fontFamily;
-
-    .impact-table-main-header {
-      padding: 12px 16px 16px 16px;
-      display: flex;
-      justify-content: space-between;
-      background: $whiteColor;
-      border-radius: 8px 8px 0 0;
-      width: 100%;
-      transition: width 500ms ease;
-      align-items: inherit;
-      // flex-direction: column;
-
-      .impact-table-main-header-container {
-        flex-direction: row;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        width: 100%;
-      }
-
-      .impact-table-main-header-left {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-
-        .table-heading {
-          font-size: 14px;
-          font-weight: $BoldFontWeight;
-          color: $darkColor;
-        }
-      }
-
-      .impact-table-center-cta-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-      }
-
-      .right-table-cta-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-
-        [data-icon="table-settings"] {
-          background: $textButtonPrimaryBg url("../../assets/menu.svg")
-            no-repeat;
-          background-position: center;
-          border: none;
-          cursor: pointer;
-
-          &:focus {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/table-menu-hover.svg") no-repeat;
-            background-position: center;
-          }
-
-          &:hover {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/table-menu-hover.svg") no-repeat;
-            background-position: center;
-          }
-        }
-
-        [data-icon="download"] {
-          background: $textButtonPrimaryBg url("../../assets/download.svg")
-            no-repeat;
-          background-position: center;
-          border: none;
-          cursor: pointer;
-
-          &:focus {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/table-download_hover.svg") no-repeat;
-            background-position: center;
-          }
-
-          &:hover {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/table-download_hover.svg") no-repeat;
-            background-position: center;
-          }
-        }
-
-        [data-icon="comment"] {
-          background: $textButtonPrimaryBg url("../../assets/comment-icon.svg")
-            no-repeat;
-          background-position: center;
-          border: none;
-          cursor: pointer;
-
-          &:focus {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/comment-icon-blue.svg") no-repeat;
-            background-position: center;
-          }
-
-          &:hover {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/comment-icon-blue.svg") no-repeat;
-            background-position: center;
-          }
-
-          // Persist active styling when comment mode is enabled
-          &[data-active="true"] {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/comment-icon-blue.svg") no-repeat;
-            background-position: center;
-          }
-        }
-
-        [data-icon="contentual-filter"] {
-          background: $textButtonPrimaryBg url("../../assets/filter-funnel.svg")
-            no-repeat;
-          background-position: center;
-          border: none;
-          cursor: pointer;
-
-          &:focus {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/filter-funnel.svg") no-repeat;
-            background-position: center;
-          }
-
-          &:hover {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/filter-funnel.svg") no-repeat;
-            background-position: center;
-          }
-        }
-
-        [data-icon="hide-filter"] {
-          background: $textButtonPrimaryBg
-            url("../../assets/HideFilterFunnel.svg") no-repeat;
-          background-position: center;
-          border: none;
-          cursor: pointer;
-
-          &:focus {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/HideFilterFunnel.svg") no-repeat;
-            background-position: center;
-          }
-
-          &:hover {
-            background: $destructiveSecondaryFocusOutline
-              url("../../assets/HideFilterFunnel.svg") no-repeat;
-            background-position: center;
-          }
-        }
-
-        [data-icon="close"] {
-          background: url("../../assets/closeIcon.svg") no-repeat;
-          background-position: center;
-          width: 82px;
-          border: none;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .divider-line {
-          background: $disabledSecondaryBorder;
-          width: 1px;
-          height: 12px;
-        }
-      }
-
-      [data-type="table-icon"] {
-        color: #1f2b4d;
-        border: 1px solid #c3c8d4;
-        cursor: pointer;
-        min-width: 0px !important;
-        width: 32px;
-        height: 32px;
-        padding: 8px 0;
-        box-sizing: border-box;
-        border-radius: 8px;
-        &[data-type="table-chat-icon"] {
-          box-shadow: 0px 2px 5px 0px #be64075c;
-          border: 1px solid transparent;
-          background: linear-gradient(#fff, #fff) padding-box,
-            linear-gradient(180deg, #bf9f22 0%, #f19579 100%) border-box;
-        }
-
-        &[data-icon="table-search"] {
-          background: url("../../assets/search-table.svg") no-repeat;
-          background-position: center;
-        }
-
-        &[data-icon="row-width"] {
-          background: url("../../assets/compress.svg") no-repeat;
-          background-position: center;
-        }
-
-        &[data-icon="unfold-row-group"] {
-          flex: 1;
-          border: none;
-
-          svg {
-            height: 22px;
-            width: 22px;
-            color: #60697d;
-          }
-        }
-      }
-
-      .table-chat-icon-button {
-        box-shadow: 0px 2px 5px 0px #be64075c;
-        border: 1px solid transparent !important;
-        background: linear-gradient(#fff, #fff) padding-box,
-          linear-gradient(180deg, #bf9f22 0%, #f19579 100%) border-box;
-      }
-
-      .group-row-container {
-        display: flex;
-
-        &:hover {
-          background-color: $destructiveSecondaryFocusOutline;
-          border-radius: 8px;
-        }
-      }
-
-      .collapse-icon {
-        background: url("../../assets/tableExpandIcon.svg") no-repeat !important;
-        background-position: center left 12px !important;
-        padding-left: 30px;
-      }
-
-      .expand-icon {
-        background: url("../../assets/tableCollapseIcon.svg") no-repeat !important;
-        background-position: center left 12px !important;
-        padding-left: 30px;
-      }
-
-      .show-hide-editable-cells-container {
-        display: flex;
-
-        &:hover {
-          background-color: $destructiveSecondaryFocusOutline;
-          border-radius: 8px;
-        }
-
-        [data-icon="show-hide-editable-cells"] {
-          flex: 1;
-          border: none;
-          background-position: center left 10px !important;
-          padding-left: 30px;
-        }
-
-        .show-editable-cells-icon {
-          background: url("../../assets/showEditableCell.svg") no-repeat;
-        }
-
-        .hide-editable-cells-icon {
-          background: url("../../assets/hideEditableCell.svg") no-repeat;
-        }
-      }
-
-      .impact-info-panel-container {
-        border-width: 1px 0px 1px 0px;
-        border-style: solid;
-        border-color: $disabledSecondaryBorder;
-        // border: 1px 0px 1px 0px solid #D9DDE7;
-        height: 46px;
-        padding: 8px 16px;
-      }
-
-      .impact-filter-dropdown-wrapper {
-        left: -14px !important;
-      }
-    }
-
-    .comment-panel-wrapper {
-      visibility: hidden;
-    }
-
-    .table-settings-wrapper {
-      visibility: hidden;
-    }
-
-    .show-table-settings {
-      visibility: visible;
-    }
-
-    .show-comment-panel {
-      visibility: visible;
-    }
-
-    .table-more-options-container {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 55px;
-      right: 8px;
-      z-index: 99999;
-      width: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      background-color: $whiteColor;
-      padding: 8px 6px;
-      border: 1px solid $whiteColor;
-      border-radius: 8px;
-      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-      transition: all 200ms ease-in-out;
-      gap: 2px;
-
-      &.display-table-more-options {
-        width: 240px;
-        visibility: visible;
-        opacity: 1;
-        overflow: visible;
-      }
-
-      .ia-styles.ia-btn {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        color: $mainFontColor;
-        background: transparent;
-        height: 35px;
-        font-weight: 500;
-
-        &:focus {
-          outline: none;
-        }
-
-        &:hover {
-          background-color: $destructiveSecondaryFocusOutline;
-        }
-
-        & svg {
-          width: 12px;
-          height: 13px;
-
-          & path {
-            fill: #798293 !important;
-          }
-        }
-
-        .ia-btn-icon {
-          width: 12px;
-          height: 18px;
-        }
-      }
-
-      .table-settings-container {
-        border-radius: 8px;
-
-        &:hover {
-          background-color: $destructiveSecondaryFocusOutline;
-        }
-      }
-
-      .horizontal-line {
-        width: 228px;
-        height: 0px;
-        height: 1px;
-        flex: none;
-        align-self: stretch;
-        flex-grow: 0;
-        background: $disabledSecondaryBorder;
-      }
-
-      .table-settings-container {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding-left: 12px;
-        gap: 5px;
-        height: 35px;
-        cursor: pointer;
-      }
-
-      .table-settings-container-without-extra-buttons {
-        margin-top: 0;
-      }
-
-      .table-settings-text {
-        color: #1f2b4d;
-        font-weight: 500;
-        font-size: 14px;
-      }
-
-      .table-density-container {
-        padding-left: 8px;
-        margin: 0;
-        background-image: url("./../../assets/compress.svg"),
-          url("../../assets/right-arrow-menu.svg");
-        background-repeat: no-repeat, no-repeat;
-        background-position: center left 10px, center right 18px;
-        padding-left: 30px;
-
-        &:hover {
-          padding-left: 8px;
-          margin: 0;
-          background-color: $lightBlueColor;
-          background-repeat: no-repeat, no-repeat;
-          background-position: center left 10px, center right 18px;
-          padding-left: 30px;
-        }
-      }
-
-      .density-menu-open {
-        background-color: $destructiveSecondaryFocusOutline;
-      }
-    }
-
-    // table setting css
-    .table-setting-main-container {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 60px;
-      right: 15px;
-      z-index: 2;
-      width: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      background-color: $whiteColor;
-      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-      transition: all 200ms ease-in-out;
-
-      .table-setting-header {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px 16px;
-        margin-bottom: 8px;
-        background-color: #eceefd;
-
-        h2 {
-          font-family: $fontFamily;
-          font-size: 16px;
-          color: $darkColor;
-          font-weight: $BoldFontWeight;
-        }
-
-        .close_icon {
-          padding: 12px;
-          border-radius: 4px;
-          background: url("../../assets/close.svg") no-repeat;
-          background-size: 12px;
-          background-position: center;
-          width: 12px;
-          height: 12px;
-          cursor: pointer;
-
-          &:hover {
-            background: $lightBlueColor url("../../assets/close.svg") no-repeat;
-            color: $secondaryColor;
-            background-size: 12px;
-            background-position: center;
-          }
-        }
-      }
-
-      .ia-styles.ia-tabContainer {
-        padding-inline: 16px;
-      }
-
-      .ia-styles.ia-tabContainer .ia-styles.ia-tabList .ia-tab {
-        padding: 4px 8px !important;
-        min-width: 65px;
-      }
-
-      .impact-tab-panel {
-        padding: 0;
-        max-height: auto;
-        min-height: auto;
-        overflow-y: hidden;
-        margin-top: 4px;
-
-        .table-setting-columns-settings {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 12px;
-
-          .table-setting-save-view-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            background: linear-gradient(
-              83.74deg,
-              #f5f9ec 72.68%,
-              #d7e5b2 108.88%
-            );
-            border: 1px solid $saveViewBorderColor;
-            padding: 12px;
-            border-radius: 8px;
-
-            .save-view-icon-title {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-
-              .save-view-title {
-                font-size: $normalFontSize;
-                font-weight: 400;
-                color: $chatBotTextColor;
-              }
-            }
-
-            .save-view-container-active-view {
-              display: flex;
-              align-items: center;
-              gap: 4px;
-
-              .MuiChip-root.impact_badges_only_label_stroke {
-                max-width: 164px;
-              }
-            }
-          }
-
-          .save-view-menu {
-            position: absolute;
-            width: 329px;
-            bottom: 2px;
-            top: 159px;
-            left: 15px;
-            border-radius: 12px;
-            border: 1px solid $menuBorderColor;
-            padding: 8px 6px;
-            background: $whiteColor;
-            box-shadow: 0px 1px 6px 0px $saveViewBoxShadowColor;
-            z-index: 99999 !important;
-            opacity: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-
-            .save-view-menu-footer {
-              display: flex;
-              justify-content: flex-end;
-              gap: 12px;
-              padding: 8px 12px;
-              height: 44px;
-              width: 100%;
-              position: absolute;
-              bottom: 0;
-            }
-
-            .save-view-menu-view-list-item-divider {
-              border: 0.5px solid #d9dde7;
-              margin: 0;
-              position: absolute;
-              bottom: 46px;
-              width: 96%;
-            }
-
-            .save-view-menu-title {
-              height: 35px;
-              display: flex;
-              align-items: center;
-              padding: 8px 12px;
-              justify-content: space-between;
-
-              & > span {
-                font-size: $smallFontSize;
-                font-weight: $BoldFontWeight;
-                color: $textButtonFontColor;
-              }
-
-              .save-view-menu-default-view {
-                display: flex;
-                align-items: center;
-                gap: 3px;
-
-                .save-view-menu-default-view-text {
-                  font-size: $normalFontSize;
-                  font-weight: $normalFontWeight;
-                  color: $saveViewDefaultViewTextColor;
-                }
-              }
-            }
-
-            .save-view-menu-view-type {
-              height: 35px;
-              padding: 8px 12px;
-              display: flex;
-              align-items: center;
-              gap: 6px;
-
-              .impact_badges_only_label_stroke {
-                cursor: pointer;
-              }
-            }
-
-            .save-view-menu-search-container {
-              height: 35px;
-
-              .impact_inputbox_container_with_icons {
-                width: 100%;
-
-                .impact-input-wrapper {
-                  width: 100%;
-                  border: none !important;
-
-                  .left-input-icon {
-                    height: 16px;
-
-                    & > svg {
-                      color: $lightGrayColor;
-                    }
-                  }
-                }
-              }
-            }
-
-            .save-view-menu-view-list-container {
-              display: flex;
-              flex-direction: column;
-              gap: 4px;
-              overflow: auto;
-              position: absolute;
-              top: 125px;
-              bottom: 48px;
-              width: 96%;
-
-              .save-view-menu-view-list-item {
-                height: 35px;
-                padding: 8px 12px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                cursor: pointer;
-                border-radius: 8px;
-
-                &.active {
-                  background-color: $destructiveSecondaryFocusOutline;
-                }
-
-                &:hover {
-                  background-color: $textButtonPrimaryBg;
-                }
-
-                .save-view-menu-view-list-item-name {
-                  font-size: $normalFontSize;
-                  font-weight: $normalFontWeight;
-                  color: $mainFontColor;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-
-                .save-view-menu-view-list-item-actions {
-                  display: flex;
-                  align-items: center;
-                  gap: 6px;
-
-                  & > img {
-                    visibility: hidden;
-                  }
-
-                  .default-view-active-icon {
-                    visibility: visible;
-                  }
-                }
-
-                &:hover {
-                  .save-view-menu-view-list-item-actions > img {
-                    visibility: visible;
-                  }
-                }
-              }
-            }
-          }
-
-          .table-setting-columns-separator {
-            display: block;
-            height: 0.5px;
-            width: 290px;
-            margin-left: -8px;
-            margin-right: -8px;
-            background-color: $deactivateColor;
-          }
-
-          .table-setting-column-search-container {
-            display: flex;
-            flex-direction: row;
-            gap: 4px;
-            align-items: center;
-            width: 100%;
-          }
-
-          .table-setting-column-collapse-container {
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 0px;
-            width: 100%;
-            overflow: auto;
-            position: absolute;
-            top: 141px;
-            bottom: 0;
-
-            &.save-view-enabled {
-              top: 214px !important;
-            }
-
-            .table-setting-collapse-columns-container {
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              gap: 8px;
-              padding: 8px;
-              border-radius: 0px;
-              border-bottom: 1px solid $textButtonPrimaryBg;
-
-              h3 {
-                font-family: $fontFamily;
-                font-size: $smallFontSize;
-                color: $inputInfoColor;
-                line-height: 16.39px;
-                font-weight: $semiBoldFontWeight;
-              }
-            }
-
-            .table-setting-frozen-columns-list {
-              display: flex;
-              flex-direction: column;
-              gap: 4px;
-              width: 100%;
-
-              .table-setting-frozen-columns-list-item {
-                display: flex;
-                flex-direction: row;
-                gap: 4px;
-                align-items: center;
-                padding-left: 8px;
-
-                .table-setting-frozen-columns-list-drag-icon {
-                  width: 16px;
-                  height: 16px;
-                  color: $mainFontColor;
-
-                  &:hover {
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-
-            .table-setting-scroll-columns-container {
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              gap: 8px;
-              padding: 8px;
-
-              h3 {
-                font-family: $fontFamily;
-                font-size: $smallFontSize;
-                color: $inputInfoColor;
-                line-height: 16.39px;
-                font-weight: $semiBoldFontWeight;
-              }
-
-              .table-setting-scroll-main-column-list {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-                width: 100%;
-              }
-
-              .table-setting-scroll-main-column {
-                display: flex;
-                flex-direction: row;
-                gap: 4px;
-                align-items: center;
-                padding-left: 8px;
-              }
-
-              .table-setting-scroll-columns-list-drag-icon {
-                width: 16px;
-                height: 16px;
-                color: $mainFontColor;
-
-                &:hover {
-                  cursor: pointer;
-                }
-              }
-
-              .table-setting-scroll-inner-column-list {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                padding-left: 50px;
-
-                .table-setting-scroll-inner-column {
-                  display: flex;
-                  flex-direction: row;
-                  gap: 4px;
-                  align-items: center;
-                  padding-left: 8px;
-                }
-              }
-            }
-          }
-        }
-
-        .table-setting-format-settings {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 8px;
-
-          .table-setting-columns-separator {
-            display: block;
-            height: 0.5px;
-            width: 290px;
-            margin-left: -8px;
-            margin-right: -8px;
-            background-color: $deactivateColor;
-          }
-
-          .custom-menu-sub-header {
-            font-family: $fontFamily;
-            font-size: $smallFontSize;
-            color: $inputInfoColor;
-            line-height: 16.39px;
-            font-weight: $semiBoldFontWeight;
-          }
-
-          .table-setting-font-size-setting-container {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 6px;
-            padding: 0 16px;
-
-            .MuiFormGroup-root.orientation-column {
-              padding-left: 12px;
-              gap: 4px;
-
-              .ia-radioButton .MuiTypography-root {
-                font-size: $smallFontSize;
-              }
-            }
-          }
-
-          .table-setting-number-format-setting-container {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 6px;
-            padding: 0 16px;
-
-            .MuiFormGroup-root.orientation-column {
-              padding-left: 12px;
-              gap: 4px;
-
-              .ia-radioButton .MuiTypography-root {
-                font-size: $smallFontSize;
-              }
-            }
-          }
-        }
-
-        .table-setting-action-settings {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 8px;
-
-          .table-setting-columns-separator {
-            display: block;
-            height: 0.5px;
-            width: 290px;
-            margin-left: -8px;
-            margin-right: -8px;
-            background-color: $deactivateColor;
-          }
-
-          .table-setting-action-container {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .table-setting-main-container.filters-strip-visible {
-      top: 116px !important;
-    }
-
-    .display-table-setting {
-      width: 355px;
-      min-height: 480px;
-      visibility: visible;
-      opacity: 1;
-      bottom: 25px;
-      // z-index: 999;
-      // padding: 0;
-      // border: none;
-    }
-
-    .impact-ag-grid-table {
-      position: relative;
-    }
-
-    .comment-panel-main-container {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 0px;
-      right: 15px;
-      z-index: 2;
-      width: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      background-color: $whiteColor;
-      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-      transition: all 200ms ease-in-out;
-
-      .comment-panel-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px 16px;
-        background-color: #eceefd;
-
-        h2 {
-          font-family: $fontFamily;
-          font-size: 16px;
-          color: $darkColor;
-          font-weight: $BoldFontWeight;
-        }
-
-        .close_icon {
-          background: url("../../assets/close.svg") no-repeat;
-          background-size: 12px;
-          background-position: center;
-          width: 12px;
-          height: 12px;
-          cursor: pointer;
-
-          &:hover {
-            background: $lightBlueColor url("../../assets/close.svg") no-repeat;
-            color: $secondaryColor;
-            background-size: 12px;
-            background-position: center;
-          }
-        }
-      }
-
-      .comment-panel-body {
-        position: absolute;
-        top: 40px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        // display: flex;
-        // align-items: center;
-        padding-top: 8px;
-      }
-
-      .impact_emptystate {
-        min-height: auto;
-        border: none;
-        border-radius: 0px;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 2px;
-        bottom: 0;
-        width: auto;
-        padding: 0;
-        margin: 0;
-
-        .impact_center_svg_with_icon {
-          min-height: 0px;
-        }
-
-        .impact_center_svg {
-          height: auto;
-        }
-
-        .impact_heading {
-          font-size: 14px;
-          line-height: 21px;
-          margin-bottom: 0px;
-        }
-
-        .impact_paragraph {
-          width: inherit;
-          font-size: 10px;
-          line-height: 14px;
-          font-weight: 500;
-          margin-top: 0px;
-          color: #7a8294;
-          width: 285px;
-        }
-      }
-    }
-
-    .comment-panel-main-container.filters-strip-visible {
-      top: 115px !important;
-    }
-
-    .display-comment-panel {
-      width: 355px;
-      gap: 8px;
-      visibility: visible;
-      opacity: 1;
-      bottom: 25px;
-      z-index: 999;
-      padding: 0;
-      min-height: 480px;
-      border-radius: 8px;
-
-      // max-height: 500px;
-      .comment-panel-header {
-        border-bottom: none;
-
-        .close_icon {
-          padding: 0px;
-        }
-      }
-    }
-  }
-
-  .ia-bulk-action-bar {
-    padding: 8px 16px;
-    background-color: $infoBackground;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-
-    & .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        color: $primaryColor;
-      }
-    }
-  }
-
-  .ia-bulk-action-bar-text {
-    font-weight: 600;
-    font-size: $normalFontSize;
-    line-height: 21px;
-    color: $darkColor;
-  }
-
-  .ia-bulk-action-bar-select-text {
-    color: $primaryColor;
-    font-size: $smallFontSize;
-    font-weight: 500;
-    line-height: 16px;
-    cursor: pointer;
-  }
-
-  .card-container {
-    border-radius: 8px;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-    padding-bottom: 12px;
-  }
-
-  .table-setting-open {
-    .ag-root-wrapper {
-      width: calc(100% - 375px);
-      transition: all 200ms ease-in-out;
-    }
-  }
-
-  .comment-mode:not(.no-comments) {
-    .ag-root-wrapper {
-      width: calc(100% - 375px);
-      transition: all 200ms ease-in-out;
-    }
-  }
-
-  // Scoped styles for header text wrap feature (enableHeaderTextWrap prop)
-  // &.header-wrap-enabled {
-  //   .ia-icon-div {
-  //     gap: 8px;
-  //     display: none;
-  //     visibility: visible;
-  //   }
-
-  //   .ag-header-cell:hover {
-  //     .ia-icon-div {
-  //       display: flex;
-  //     }
-  //   }
-
-  //   .ag-header-cell[aria-sort="none"] {
-  //     .ag-header-cell-text.sortable {
-  //       .ia-table-sort-icon {
-  //         display: none;
-  //         visibility: visible;
-  //       }
-
-  //       &:hover {
-  //         .ia-table-sort-icon {
-  //           display: block;
-  //         }
-  //       }
-  //     }
-  //   }
-
-  //   // Dynamic header text styles
-  //   .header-container-wrapper {
-  //     display: flex;
-  //     align-items: center;
-  //     width: 100%;
-  //     height: 100%;
-  //     gap: 8px;
-  //     min-width: 15px;
-  //   }
-
-  //   .ag-header-cell-text {
-  //     display: flex;
-  //     align-items: center;
-  //     gap: 2px;
-  //     flex: 1;
-  //     height: 100%;
-  //     min-width: 15px;
-
-  //     .header-text-container {
-  //       flex: 1;
-  //       min-width: 0;
-  //       overflow: hidden;
-  //       display: flex;
-  //       align-items: center;
-  //       height: 100%;
-
-  //       .header-text-content {
-  //         display: -webkit-box;
-  //         -webkit-box-orient: vertical;
-  //         overflow: hidden;
-  //         text-overflow: ellipsis;
-  //         line-height: 1.2;
-  //         word-wrap: break-word;
-  //         word-break: break-word;
-  //         hyphens: auto;
-  //         white-space: normal;
-  //         width: 100%;
-  //       }
-  //     }
-
-  //     .ia-table-sort-icon {
-  //       flex-shrink: 0;
-  //     }
-  //   }
-
-  //   .ia-icon-div {
-  //     flex-shrink: 0;
-  //   }
-
-  //   .ag-header-cell[aria-sort="ascending"] {
-  //     .ag-header-cell-text {
-  //       .ia-table-sort-icon {
-  //         display: block;
-  //         width: 16px;
-  //         height: 16px;
-  //         cursor: pointer;
-  //       }
-  //     }
-  //   }
-
-  //   .ag-header-cell[aria-sort="descending"] {
-  //     .ag-header-cell-text {
-  //       .ia-table-sort-icon {
-  //         display: block;
-  //         width: 16px;
-  //         height: 16px;
-  //         cursor: pointer;
-  //       }
-  //     }
-  //   }
-
-  //   // Number cell specific styles for header wrap
-  //   .number-cell {
-  //     .custom-ag-header-container {
-  //       .ag-header-cell-text {
-  //         flex-direction: row-reverse !important;
-
-  //         .header-text-container {
-  //           flex-direction: row-reverse !important;
-  //           justify-content: flex-end !important;
-  //         }
-  //       }
-  //     }
-
-  //     .header-container-wrapper {
-  //       flex-direction: row-reverse !important;
-  //     }
-  //   }
-  // }
-}
-
-.ia-basic-table-layout.table-v32 {
-  &.ag-popup .ag-react-container.ag-tooltip-custom.ag-ltr.ag-popup-child img {
-    max-width: 335px;
-    max-height: 335px;
-    border: 4px solid #687af1;
-    border-radius: 8px;
-  }
-
-  .ag-menu {
-    padding: 10px;
-  }
-
-  .ia-search-input-field {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    padding: 4px;
-    border-radius: 8px;
-    background-color: $lightBlueColor;
-    flex: 1;
-
-    .impact-datepicker-main-container.label-flex-column {
-      width: 100%;
-    }
-
-    .ia-search-input-field-custom-icon {
-      position: absolute;
-      right: 8px;
-      top: 8px;
-      cursor: pointer;
-      width: 16px;
-      height: 16px;
-      color: $textButtonFontColor;
-    }
-
-    &::before {
-      position: absolute;
-      left: 0;
-      content: " ";
-      background: $lightBlueColor;
-      top: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    .impact-input-wrapper {
-      min-width: 50px;
-    }
-
-    .ia-search-input-field-close-icon {
-      font-size: 20px;
-      color: #4259ee;
-      cursor: pointer;
-      position: relative;
-    }
-
-    .impact_inputbox_container_with_icons {
-      flex: 1;
-
-      .impact-input-wrapper {
-        background: $whiteColor url("./../../assets/search-table.svg") no-repeat;
-        background-position: center left 8px;
-        padding-left: 25px;
-        background-size: 12px;
-      }
-
-      &.input-with-disabled {
-        .impact-input-wrapper {
-          background-color: $disabledSecondaryBg;
-        }
-      }
-    }
-  }
-}
-
-.ia-search-input-narrow {
-  .impact_inputbox_container_with_icons {
-    flex: 1;
-
-    .impact-input-wrapper {
-      background: $whiteColor !important;
-      padding-left: 12px !important;
-    }
-  }
-}
-
-.ia-basic-table-layout.table-v32 {
-  .row-height-option {
-    &::before {
-      content: "";
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
-      position: relative;
-      top: 3.5px;
-      display: inline-block;
-    }
-
-    &.default-row-height::before {
-      background: transparent url("../../assets/row_height_default.svg")
-        no-repeat;
-      background-position: center;
-    }
-
-    &.compact-row-height::before {
-      background: transparent url("../../assets/row_height_compact.svg")
-        no-repeat;
-      background-position: center;
-    }
-
-    &.comfort-row-height::before {
-      background: transparent url("../../assets/row_height_comfort.svg")
-        no-repeat;
-      background-position: center;
-    }
-  }
-
-  // table footer extra options
-
-  .table-footer-section {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    margin-top: 16px;
-    position: absolute;
-    bottom: 13px;
-    left: 0;
-    right: 174px;
-
-    .table-footer-left-section {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 12px;
-    }
-
-    .table-footer-center-section {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 12px;
-    }
-
-    .table-footer-bottom-section {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 12px;
-    }
-  }
-
-  .table-footer-section-without-pagination {
-    position: static;
-    width: 60%;
-  }
-
-  .table-footer-section-with-only-pagination {
-    justify-content: flex-end;
-  }
-
-  // .card-container {
-  //   .table-footer-section {
-  //     bottom: 30px;
-  //   }
-  // }
-
-  .ag-header-row .ag-header-cell:has(.ia-search-input-narrow) {
-    padding-inline: 2px;
-  }
-
-  .card-container:has(.table-footer-section) {
-    padding-bottom: 0px !important;
-  }
-
-  // nested table styles
-
-  .nested-table-container {
-    margin: 16px;
-  }
-
-  .select-button-container {
-    .ia-styles.ia-btn.ia-btn-outlined {
-      border-color: #c3c8d4;
-      color: #1f2b4d;
-
-      & svg {
-        & path {
-          fill: #1f2b4d !important;
-        }
-      }
-    }
-  }
-
-  .ag-cell-range-selected-1:not(.ag-cell-focus),
-  .ag-root:not(.ag-context-menu-open)
-    .ag-body-viewport:not(.ag-has-focus)
-    .ag-cell-range-selected-1:not(.ag-cell-inline-editing) {
-    background-color: transparent;
-    color: $mainFontColor;
-  }
-
-  .ia-styles.ia-tabContainer
-    .ia-styles.ia-tabList
-    .ia-tab.MuiButtonBase-root
-    svg {
-    margin-right: 0px !important;
-    margin-left: 0px !important;
-
-    &:hover {
-      path {
-        stroke: #3649c6;
-      }
-    }
-  }
-
-  .ia-styles.ia-tabContainer
-    .ia-styles.ia-tabList
-    .ia-tab.MuiButtonBase-root.Mui-selected {
-    font-size: 16px !important;
-    gap: 8px !important;
-
-    & svg {
-      & path {
-        stroke: #3649c6;
-      }
-    }
-  }
-
-  .table-setting-columns-settings {
-    .css-78trlr-MuiButtonBase-root-MuiIconButton-root:hover {
-      background-color: transparent;
-    }
-
-    .css-78trlr-MuiButtonBase-root-MuiIconButton-root {
-      padding: 0px !important;
-    }
-
-    .impact-input-wrapper {
-      width: 268px;
-    }
-
-    .table-setting-collapse-columns-container {
-      background-color: transparent !important;
-    }
-  }
-
-  //Vertical Scroll
-  .ag-ltr .ag-body-vertical-scroll.ag-scrollbar-invisible {
-    display: block !important;
-  }
-}
-
-.ag-ltr .ag-header-group-cell-label.ag-sticky-label,
-.ia-basic-table-layout .custom-ag-header-container .ag-header-cell-text {
-  color: $darkColor;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-}
-
-.ia-basic-table-layout.table-v32
-  .ag-header-cell
-  .ag-checkbox.ag-hidden
-  ~ .ag-header-cell-comp-wrapper {
-  .custom-ag-header-container .ag-header-cell-text {
-    line-height: 40px;
-  }
-}
-
-.ia-basic-table-layout.table-v32
-  .ag-header-row
-  .ag-header-group-cell.ag-header-group-cell-with-group:nth-child(odd)::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  content: " ";
-  height: 2px;
-  bottom: 0;
-  background: $tableLavendarStroke;
-}
-
-.ia-basic-table-layout.table-v32
-  .ag-header-row
-  .ag-header-group-cell.ag-header-group-cell-with-group:nth-child(even)::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  content: " ";
-  height: 2px;
-  bottom: 0;
-  background: $warningAlertIcon;
-}
-
-.ag-ltr
-  .ag-cell-range-single-cell:not(:has(.ag-selection-checkbox)):focus-within {
-  // border: 1px solid $lightBlueColor !important;
-  // color: $primaryColor !important;
-  &:after {
-    content: " ";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: $primaryColor;
-    left: 0;
-  }
-}
-
-.density-menu-container {
-  position: absolute;
-  padding: 8px 6px;
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  transition: all 200ms ease-in-out;
-  width: 240px;
-  background: $whiteColor;
-  left: -251px;
-  top: -6px;
-  // display: none;
-}
-
-.density-menu-wrapper:hover {
-  .density-menu-container {
-    display: block;
-  }
-}
-
-.density-menu-wrapper {
-  position: relative;
-}
-
-.density-menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: #1f2b4d;
-  cursor: pointer;
-  background-size: 14px;
-  background-position: 12px center;
-  padding-left: 32px;
-  height: 35px;
-  margin-bottom: 2px;
-
-  &:hover {
-    background-color: #eceefd;
-    border-radius: 8px;
-  }
-}
-
-.table-option-footer-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.default_menu {
-  background: url("./../../assets/default.svg") no-repeat;
-  background-size: 12px;
-  background-position: center left 10px;
-
-  &:hover,
-  &.selected {
-    background: $lightBlueColor url("./../../assets/default.svg") no-repeat;
-    background-size: 12px;
-    background-position: center left 10px;
-    border-radius: 8px;
-  }
-}
-
-.compact_menu {
-  background: url("./../../assets/compact.svg") no-repeat;
-  background-size: 12px;
-  background-position: center left 10px;
-
-  &:hover,
-  &.selected {
-    background: $lightBlueColor url("./../../assets/compact.svg") no-repeat;
-    background-size: 12px;
-    background-position: center left 10px;
-    border-radius: 8px;
-  }
-}
-
-.comfort_menu {
-  background: url("./../../assets/comfort.svg") no-repeat;
-  background-size: 12px;
-  background-position: center left 10px;
-
-  &:hover,
-  &.selected {
-    background: $lightBlueColor url("./../../assets/comfort.svg") no-repeat;
-    background-size: 12px;
-    background-position: center left 10px;
-    border-radius: 8px;
-  }
-}
-
-// .comfort_menu:hover,.comfort_menu.selected{
-//   background: $lightBlueColor url('./../../assets/comfort-hover.svg') no-repeat;
-//   background-size: 12px;
-//   background-position: center left 10px;
-//   border-radius: 8px;
-// }
-
-.ag-cell.ag-cell-range-selected:not(
-    .ag-cell-range-single-cell
-  ).ag-cell-range-left,
-.ag-cell.ag-cell-range-selected:not(
-    .ag-cell-range-single-cell
-  ).ag-cell-range-bottom,
-.ag-cell.ag-cell-range-selected:not(
-    .ag-cell-range-single-cell
-  ).ag-cell-range-top {
-  border: none;
-
-  &::after {
-    content: " ";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: #4259ee;
-    left: 0;
-  }
-}
-
-.ag-cell-range-selected.ag-cell-range-left {
-  background-color: $destructiveSecondaryFocusOutline !important;
-
-  &::after {
-    display: none;
-  }
-}
-
-//CSS for table edits
-
-.cell-renderer.ag-cell-value:has(input) {
-  background: $destructiveSecondaryFocusOutline;
-  padding: 0 6px !important;
-
-  &:hover {
-    background: $accordionBgBackground;
-  }
-}
-
-.cell-renderer.ag-cell-value.ag-cell-focus:has(input) {
-  background: $destructiveSecondaryFocusOutline;
-}
-
-.cell-renderer.ag-cell-value:has(.ia-select-main-container-v3) {
-  background: $destructiveSecondaryFocusOutline !important;
-  padding: 0 6px !important;
-}
-
-.cell-renderer.ag-cell-value.ag-cell-focus:has(.ia-select-main-container-v3) {
-  background: $destructiveSecondaryFocusOutline !important;
-}
-
-.cell-renderer.ag-cell-value input {
-  border: none !important;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cell-renderer.ag-cell-value .impact_inputbox_container .MuiInputBase-root {
-  border: none;
-}
-
-.cell-renderer.cell-renderer.ag-cell-value
-  .impact_inputbox_container_with_icons
-  .impact-input-wrapper {
-  border: none;
-}
-
-.cell-renderer.ag-cell-value
-  .impact_inputbox_container
-  .MuiInputBase-root.Mui-focused {
-  border: none !important;
-}
-
-.cell-renderer.ag-cell-value .ia-select-styled-dropdown-main-button {
-  border: none;
-}
-
-.cell-renderer.ag-cell-value.compact-cell {
-  .impact_inputbox_container .MuiInputBase-root {
-    height: 24px;
-  }
-
-  .impact_inputbox_container .MuiInputBase-input {
-    height: 24px;
-  }
-
-  .impact-dateRangePicker-main-container .dateRangePicker-input-container {
-    height: 24px;
-  }
-
-  .impact_inputbox_container_with_icons .impact-input-wrapper {
-    height: 24px;
-  }
-
-  .impact_inputbox_container_with_icons .MuiInputBase-root {
-    height: 24px;
-  }
-
-  .ia-select-styled-dropdown-main-button {
-    height: 24px;
-  }
-
-  .impact-dateRangePicker-main-container
-    .dateRangePicker-input-container
-    .dateRangePicker-input-end-date {
-    background-size: 10px;
-  }
-
-  .MuiChip-root {
-    height: 20px;
-  }
-
-  .MuiChip-root .MuiChip-label {
-    font-size: 12px;
-  }
-
-  .impact-datepicker-main-container {
-    .datePicker-input-container {
-      height: 24px;
-
-      .impact-datepicker-date-input {
-        height: 24px;
-      }
-    }
-  }
-}
-
-.cell-renderer {
-  .impact_inputbox_container_with_icons .impact-input-wrapper .left-input-icon {
-    display: none;
-  }
-
-  .impact_inputbox_container_with_icons
-    .impact-input-wrapper
-    .right-input-icon {
-    display: none;
-  }
-
-  .impact_inputbox_container_with_icons .impact-input-wrapper:hover {
-    .left-input-icon {
-      display: flex;
-    }
-
-    .right-input-icon {
-      display: flex;
-    }
-  }
-
-  .icon-click-on-disabled.impact_inputbox_container_with_icons
-    .impact-input-wrapper
-    .left-input-icon {
-    display: flex;
-  }
-
-  .icon-click-on-disabled.impact_inputbox_container_with_icons
-    .impact-input-wrapper
-    .right-input-icon {
-    display: flex;
-  }
-
-  .impact_inputbox_container_with_icons .impact-input-wrapper {
-    min-width: 0px;
-  }
-}
-
-.cell-renderer {
-  .impact-datepicker-main-container {
-    .datePicker-input-container {
-      .impact-datepicker-date-input {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-}
-
-.ag-cell[col-id="checkbox"] {
-  &::after {
-    display: none;
-  }
-}
-
-.MuiInputBase-root input:focus {
-  .right-input-icon {
-    display: block;
-  }
-}
-
-.master_table_expandable {
-  .ag-details-row {
-    padding: 16px 24px;
-
-    .ag-root {
-      border-left: none;
-      border-right: none;
-    }
-  }
-
-  .ag-cell {
-    &:last-child {
-      border-right: none !important;
-    }
-  }
-
-  .ag-header-cell {
-    &:last-child {
-      border-right: none !important;
-    }
-  }
-
-  .ag-cell-focus {
-    background: $whiteColor;
-  }
-
-  .ag-cell-focus:after {
-    content: " ";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: #4259ee;
-    left: 0;
-  }
-}
-
-.ag-icon-tree-open:hover,
-.ag-icon-tree-closed:hover {
-  color: $primaryColor !important;
-}
-
-.ia-basic-table-layout.table-v32 .ag-row-footer {
-  .ag-cell:hover {
-    background: transparent !important;
-  }
-
-  .ag-cell-range-single-cell:after {
-    display: none;
-  }
-
-  .ag-root:not(.ag-context-menu-open)
-    .ag-body-viewport:not(.ag-has-focus)
-    .ag-cell-range-selected-1:not(.ag-cell-inline-editing) {
-    background-color: transparent;
-  }
-
-  .ag-cell-range-selected-1 {
-    background-color: transparent !important;
-  }
-}
-
-.ia-table-search-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.ia-table-search-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-top: 16px;
-  justify-content: space-between;
-
-  .ia-table-search-content-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: $inputInfoColor;
-  }
-
-  .ia-table-search-content-body {
-    display: flex;
-    justify-content: space-between;
-    gap: 16px;
-  }
-
-  .ia-table-search-content-footer {
-    display: flex;
-    gap: 16px;
-  }
-}
-
-.MuiBadge-badge.MuiBadge-dot {
-  background: $destructiveBg !important;
-}
-
-.ag-menu[role="presentation"] {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25) !important;
-  border: none;
-  z-index: 99999;
-  padding: 10px;
-  margin-left: 13px;
-
-  &:hover {
-    .ia-icon-div {
-      // visibility: visible;
-    }
-  }
-
-  .settings-main-container {
-    background: url("../../assets/setting-table.svg") no-repeat;
-    background-position: 0 center;
-    width: 14px;
-    height: 14px;
-    padding-left: 20px;
-    color: $mainFontColor;
-    font-size: 12px;
-    font-weight: $normalFontWeight;
-    background-position: 16px center;
-
-    .ag-menu-option-text {
-      padding-left: 24px;
-    }
-  }
-
-  .format-main-container > span {
-    border-top: 1px solid #efefef;
-  }
-
-  .format-main-container {
-    background: url("../../assets/format-icon.svg") no-repeat;
-    width: 14px;
-    height: 14px;
-    padding-left: 20px;
-    color: $mainFontColor;
-    font-size: 12px;
-    font-weight: $normalFontWeight;
-    background-position: 16px center;
-    background-size: 11px;
-
-    .ag-menu-option-text {
-      padding-left: 24px;
-    }
-  }
-
-  .ag-menu-separator {
-    display: none;
-  }
-
-  .ag-menu-option-icon {
-    width: 10px;
-    padding-left: 0px;
-  }
-
-  [aria-label="Context Menu"].ag-menu-option-icon {
-    padding-left: 12px;
-  }
-
-  .ag-menu-option-active {
-    background-color: $whiteColor;
-  }
-
-  .format-main-container > span {
-    border-top: 1px solid #efefef;
-  }
-
-  .ag-icon-small-right::before {
-    content: " ";
-    background: url("../../assets/accordion-chevron.svg") no-repeat;
-    background-size: 12px;
-    width: 16px;
-    height: 16px;
-    display: block;
-    transform: rotate(-90deg);
-  }
-
-  .ag-menu-option {
-    .ag-icon-tick {
-      padding-left: 16px;
-    }
-
-    &:not(
-        .ag-menu-option-disabled,
-        .format-main-container,
-        .settings-main-container
-      ):hover {
-      cursor: pointer;
-    }
-  }
-
-  .ag-menu-list {
-    padding-bottom: 10px;
-  }
-
-  .ag-header-icon {
-    .ag-icon-menu {
-      display: none;
-    }
-  }
-
-  .ag-header-cell:hover {
-    .ag-header-icon {
-      .ag-icon-menu {
-        display: block;
-      }
-    }
-  }
-}
-
-.ag-popup-child[aria-label="SubMenu"] {
-  .ag-icon::before {
-    position: relative;
-    left: -10px;
-  }
-}
-
-.ag-header-row-column-group {
-  .ag-header-group-cell-with-group {
-    .ag-header-cell-comp-wrapper {
-      .ag-sticky-label {
-        padding-inline: 20px;
-      }
-    }
-  }
-}
-
-//save view modal
-
-.save-view-modal.ia_modalPopover {
-  .ia_modalBody {
-    padding-top: 16px;
-    padding-bottom: 60px;
-    overflow: hidden;
-
-    .save-view-modal-children-header {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 36px;
-      background: $saveViewModalHeaderBgColor;
-      border-radius: 4px;
-      padding: 4px 6px;
-
-      .save-view-modal-children-header-text {
-        font-size: $normalFontSize;
-        font-weight: $normalFontSize;
-        color: $yellowBadgeDark;
-      }
-    }
-
-    .save-view-modal-children-body {
-      margin-top: 24px;
-
-      .impact_inputbox_container {
-        width: 100%;
-
-        & > label {
-          line-height: 16px;
-        }
-      }
-
-      .save-view-modal-children-body-radio-group {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .save-view-modal-children-body-radio-group-text {
-          font-size: $normalFontSize;
-          font-weight: $normalFontWeight;
-          color: $textButtonFontColor;
-          height: 16px;
-        }
-
-        .MuiFormGroup-root.orientation-row {
-          height: 20px;
-
-          .MuiFormControlLabel-root {
-            margin-inline: 0px;
-          }
-        }
-      }
-
-      .save-view-modal-children-body-checkbox {
-        margin-top: 24px;
-        width: auto;
-      }
-
-      .save-view-modal-children-body-replace-view {
-        margin-top: 38px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        & > span {
-          font-size: $smallFontSize;
-          font-weight: $normalFontWeight;
-          color: $lightGrayColor;
-          position: relative;
-          height: 16px;
-
-          &::before {
-            left: -138px;
-            position: absolute;
-            content: "";
-            background: $disabledSecondaryBorder;
-            height: 1px;
-            right: 156px;
-            top: 11px;
-          }
-
-          &::after {
-            left: 156px;
-            position: absolute;
-            content: "";
-            background: $disabledSecondaryBorder;
-            height: 1px;
-            top: 11px;
-            right: -138px;
-          }
-        }
-      }
-
-      .save-view-modal-children-body-replace-view-select {
-        margin-top: 28px;
-
-        .ia-select-label-v3 {
-          line-height: 16px;
-        }
-      }
-    }
-  }
-}
-
-.comments-portal-container {
-  background-color: $whiteColor;
-  border-radius: 0px 16px 16px 16px;
-
-  &.left {
-    border-radius: 16px 0px 16px 16px;
-  }
-
-  box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.1);
-  width: 350px;
-  display: flex;
-  flex-direction: column;
-
-  &.clickable {
-    cursor: pointer;
-  }
-}
-
-// .comments-portal-list {
-//   overflow-y: auto;
-//   flex-grow: 1;
-// }
-
-.comments-portal-header {
-  padding: 11px 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: $whiteColor;
-  border-bottom: 1px solid $disabledSecondaryBorder;
-  border-radius: 0 16px 0 0;
-
-  &.left {
-    border-radius: 16px 0 0 0;
-  }
-
-  .comments-portal-header-inner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  h3 {
-    font-size: 14px;
-    font-weight: 800;
-    color: $darkColor;
-  }
-
-  .comments-portal-header-buttons {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .comment-close {
-      svg {
-        padding: 2px;
-      }
-    }
-  }
-}
-
-.comments-portal-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  gap: 16px;
-  display: flex;
-  flex-direction: column;
-}
-
-.comment-item-row-1 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-}
-
-.comment-item-author-section {
-  display: flex;
-  align-items: center;
-}
-
-.comment-item-author-name {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 21px;
-  padding-left: 5.5px;
-  padding-right: 4px;
-}
-
-.comment-item-timestamp {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 15px;
-  color: #60697d;
-}
-
-.comment-item-row-2 {
-  display: flex;
-  align-items: center;
-  padding-top: 8.5px;
-}
-
-.comment-item-avatar-placeholder {
-  width: 24px;
-  height: 24px;
-  opacity: 0;
-}
-
-.comment-item-text {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: #0d152c;
-  padding-left: 32px;
-  word-wrap: break-word; // Allow long words to break
-  word-break: break-word; // Break long words if necessary
-  overflow-wrap: break-word; // Modern property for word breaking
-  white-space: pre-wrap; // Preserve whitespace and wrap text
-  max-width: 100%; // Ensure it doesn't exceed container width
-  box-sizing: border-box; // Include padding in width calculation
-
-  span.mention {
-    color: #4259ee;
-  }
-}
-
-.comment-edit-input-wrapper {
-  padding-left: 20px;
-  width: 100%;
-  box-sizing: border-box;
-
-  .no-comments-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    // width: auto;
-    .comment-input-wrapper {
-      border: 1px solid #c3c8d4;
-      border-radius: 8px;
-    }
-  }
-
-  .no-comments-container.in-portal {
-    width: auto;
-  }
-}
-
-.comment-edit-input {
-  width: 100%;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.4285714285714286em;
-  color: #0d152c;
-  border: 1px solid #4259ee;
-  border-radius: 4px;
-  padding: 4px 8px;
-  background-color: #fff;
-  font-family: $fontFamily;
-  box-sizing: border-box;
-  outline: none;
-
-  &:focus {
-    border-color: #4259ee;
-    box-shadow: 0 0 0 2px rgba(66, 89, 238, 0.1);
-  }
-
-  &::placeholder {
-    color: $lightGrayColor;
-  }
-}
-
-.add-comment-section {
-  display: flex;
-  align-items: flex-start;
-  padding: 16px;
-  padding-top: 0px;
-
-  .no-comments-container .comment-input-wrapper {
-    border: 1px solid $secondaryColor;
-    border-radius: 8px;
-  }
-}
-
-.no-comments-container {
-  display: flex;
-  align-items: flex-start; // Changed from center to flex-start for better textarea alignment
-  overflow: hidden; // Prevent container overflow
-
-  .impact-input-wrapper {
-    padding: 16px;
-  }
-
-  &.in-portal {
-    width: 100%;
-    margin-left: 10px;
-    gap: 0px;
-    max-height: 182px; // Ensure portal version respects max height
-  }
-
-  &.as-banner {
-    position: fixed;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    z-index: 9999;
-    min-width: 180px;
-    max-height: 182px; // Ensure banner version respects max height
-  }
-
-  .no-comments-input {
-    flex: 1;
-  }
-
-  .comment-input-wrapper {
-    display: flex;
-    align-items: flex-end;
-    width: 265px;
-    max-height: 182px;
-    overflow: hidden; // Prevent wrapper overflow
-    transition: all 0.2s ease-in-out;
-    padding: 4px 12px;
-    border: 1px solid $primaryColor;
-    border-radius: 8px;
-    gap: 2px;
-  }
-
-  .comment-input-wrapper.stacked {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .comment-input-wrapper.empty {
-    flex-direction: row;
-    align-items: flex-end;
-  }
-
-  .comment-input-wrapper.single-line-textarea {
-    align-items: center;
-  }
-
-  .comments-textarea {
-    flex: 1;
-    resize: none;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    padding: 0;
-    background: transparent;
-    line-height: 160%;
-    overflow-y: hidden;
-    max-height: 130px;
-    min-height: 20px; // Ensure minimum height for single line
-    font-family: $fontFamily;
-    font-weight: 400;
-    color: $mainFontColor;
-
-    &::placeholder {
-      color: $lightGrayColor;
-    }
-
-    transition: all 0.2s ease-in-out;
-  }
-
-  .comments-textarea.scrollable {
-    overflow-y: auto;
-  }
-}
-
-#ia-select-option-dropdown-container {
-  .ia-select-button-clear-icon {
-    right: 27px;
-  }
-}
-
-// List view (virtualized) — capsule rows + 12px spacing
-.list-mode-enabled.list-view {
-  .left-input-icon {
-    height: 16px;
-  }
-
-  .ag-pinned-left-header {
-    border-right: none !important;
-  }
-
-  .ag-center-cols-container {
-    padding-left: 2px !important;
-  }
-
-  .list-view-wrapper {
-    height: var(--ag-grid-height);
-
-    // Override checkbox left margin from lines 325-328 and set custom width/padding
-    .ag-header-cell,
-    .ag-header-group-cell {
-      &[col-id="__checkbox"] {
-        padding: 0 20px !important;
-
-        .ag-checkbox {
-          left: 0 !important;
-          width: 16px !important;
-
-          .ag-checkbox-input-wrapper {
-            width: 16px !important;
-            height: 16px !important;
-          }
-        }
-      }
-    }
-
-    .ag-header-cell .ag-checkbox {
-      left: 0 !important;
-      margin: 0 !important;
-    }
-
-    // Apply same styling to row cells
-    .ag-row .ag-cell {
-      &[col-id="checkbox"] {
-        padding: 0 20px !important;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-right: none !important;
-
-        .ag-checkbox {
-          width: 16px !important;
-
-          .ag-checkbox-input-wrapper {
-            width: 16px !important;
-            height: 16px !important;
-          }
-        }
-      }
-    }
-
-    // Auto-align Input and Select components in list view cells (descendant selectors)
-    // .ag-row .ag-cell .css-1nrlq1o-MuiFormControl-root {
-    //   height: 32px !important;
-    //   display: flex !important;
-    //   align-items: center !important;
-
-    //   .MuiInputBase-root {
-    //     height: 32px !important;
-
-    //     input.MuiInputBase-input {
-    //       height: 32px !important;
-    //     }
-    //   }
-    // }
-
-    .ag-root-wrapper {
-      padding: 0px 12px;
-
-      // padding-top: 0px;
-      .ag-root {
-        border: none;
-
-        .ag-header {
-          margin-bottom: 12px;
-        }
-      }
-
-      .ag-body {
-        .ag-body-viewport {
-          scrollbar-width: none !important;
-          // Override AG Grid's width calculation when scrollbars are hidden
-          width: 100% !important;
-        }
-      }
-    }
-  }
-
-  // ---- global AG wrappers ----
-  .ag-root,
-  .ag-root-wrapper-body,
-  .ag-center-cols-clipper,
-  .ag-center-cols-viewport {
-    border: none;
-    box-shadow: none;
-    background: transparent;
-  }
-
-  .ag-root-wrapper {
-    &::before {
-      content: "";
-      display: none !important;
-      width: 100%;
-      height: 0px;
-      background: var(--ag-border-color);
-      position: absolute;
-      top: 0px;
-      z-index: 1;
-      left: 0;
-    }
-  }
-
-  // center viewport should allow smooth scroll while keeping virtualized behavior
-  .ag-center-cols-viewport {
-    overflow-x: auto;
-    overflow-y: auto;
-  }
-
-  // header
-  .ag-header {
-    background: $textButtonPrimaryBg;
-    border-radius: 8px;
-
-    .ag-header-cell {
-      background: transparent;
-      border: none !important;
-
-      // Vector 64 - Vertical separator (exclude last child)
-      &:not(.ag-column-last)::after {
-        content: "";
-        margin: 0 auto;
-        width: 0px;
-        height: 24px;
-        border: 1px solid $disabledSecondaryBorder;
-
-        /* Inside auto layout */
-        flex: none;
-        order: 1;
-        flex-grow: 0;
-
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-
-      font-weight: 700;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      box-sizing: border-box;
-      height: 40px;
-      padding: 0 20px;
-
-      &.ag-header-cell-sortable {
-        cursor: pointer;
-      }
-
-      .ag-header-cell-resize::after {
-        display: none;
-      }
-
-      // &:first-child {
-      //   // border-right: none !important;
-      //   padding: 0px 20px;
-      // }
-      &:last-child {
-        padding-right: 26px !important;
-      }
-    }
-
-    .ag-header-cell-text {
-      color: $chatBotTextColor;
-      // font-family: "Manrope", sans-serif;
-    }
-  }
-
-  // ---- row & cell layout: capsule style ----
-  // AG Grid will keep using transform for virtualization; margin-bottom gives visual spacing
-  .ag-row {
-    // width: 100%;
-    // background: $whiteColor;
-    border: 1px solid $disabledSecondaryBorder !important;
-    border-radius: 8px;
-    // box-sizing: border-box;
-    // display: flex;
-    // align-items: center;
-    // transition: background 120ms, border-color 120ms;
-    // overflow: visible;
-    // will-change: transform;
-    // padding: 0 16px;
-    // margin: 0;
-
-    &:hover {
-      background: $lightBlueColor;
-      border-color: $disabledSecondaryBorder;
-    }
-
-    &.ag-row-selected {
-      // background: $lightBlueColor !important;
-      border: 1px solid $accordionBgBackground !important;
-      border-radius: 8px !important;
-
-      &::before {
-        position: relative;
-      }
-    }
-
-    // Dynamic row height classes based on content
-    &.list-row-with-image {
-      height: 72px !important;
-      min-height: 72px !important;
-      max-height: 72px !important;
-    }
-
-    &.list-row-without-image {
-      height: 48px !important;
-      min-height: 48px !important;
-      max-height: 48px !important;
-    }
-  }
-
-  // Keep row heights controlled by getRowHeight; this line only influences inline alignment
-  .ag-theme-alpine .ag-cell {
-    line-height: normal !important;
-  }
-
-  // ---- cell styling ----
-  .ag-root-wrapper .ag-center-cols-container .ag-cell {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 19px;
-    background: transparent !important;
-    border: 1px solid transparent !important; // Transparent border to prevent layout shift
-    font-size: 14px;
-    box-sizing: border-box;
-    min-width: 0; // important for flex children to shrink
-    overflow: visible;
-    // height now set dynamically per row via getRowStyle based on image detection
-  }
-
-  // Plain text values: ellipsis
-  .ag-cell .ag-cell-value {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    width: 100%;
-    color: $mainFontColor;
-    font-weight: 500;
-  }
-
-  // Custom renderer / components should wrap and not be truncated
-  .ag-cell > *:not(.ag-cell-value) {
-    flex: 1 1 auto;
-    max-width: 100%;
-    overflow: visible;
-    white-space: normal;
-  }
-
-  // ensure all children respect flex shrinking
-  // .ag-cell input, .ag-cell select, .ag-cell img, .ag-cell svg {
-  //   max-width: 100% !important;
-  //   min-width: 0 !important;
-  //   box-sizing: border-box;
-  //   font-family: "Manrope", sans-serif;
-  // }
-
-  // small inline items (icons, checkboxes, images) keep natural size
-  // .ag-cell svg,
-  // .ag-cell img,
-  // .ag-cell .ag-icon,
-  // .ag-cell .ag-selection-checkbox,
-  // .ag-cell button.ag-icon {
-  //   max-width: unset !important;
-  //   flex: 0 0 auto;
-  //   width: auto;
-  // }
-
-  // Cell focus styling - only show border when element has actual browser focus
-  // .ag-root-wrapper .ag-center-cols-container .ag-cell:focus {
-  //   border: 1px solid $primaryColor !important;
-  //   outline: none;
-  // }
-
-  // Override AG Grid's focus class to ensure it doesn't interfere
-  .ag-root-wrapper
-    .ag-center-cols-container
-    .ag-cell.ag-cell-focus:not(:focus) {
-    border: 1px solid transparent !important;
-  }
-
-  // Selection styling (for range selection)
-  .ag-root-wrapper
-    .ag-center-cols-container
-    .ag-cell.ag-cell-range-single-cell.ag-cell-range-selected:not(
-      [col-id="checkbox"]
-    ) {
-    border: 1px solid $primaryColor !important;
-    outline: none;
-  }
-
-  .ag-root-wrapper
-    .ag-center-cols-container
-    .ag-cell.ag-cell-range-selected.ag-cell-range-single-cell.ag-column-last {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-  .ag-root-wrapper
-    .ag-center-cols-container
-    .ag-cell.ag-cell-range-selected.ag-cell-range-single-cell.ag-column-first {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-
-  // fixed checkbox column width (pinned left behavior supported)
-  .ag-cell .ag-selection-checkbox {
-    left: 0px;
-    margin: 0;
-  }
-
-  // pinned left container: stack like cards (visual spacing)
-  .ag-pinned-left-cols-container {
-    display: flex;
-    flex-direction: column;
-    border-right: none !important;
-  }
-
-  // image renderer
-  .ia-image-renderer {
-    width: 46px;
-    height: 46px;
-    border-radius: 6px;
-    object-fit: cover;
-    display: block;
-    flex: 0 0 auto;
-  }
-
-  .ia-image-placeholder {
-    width: 46px;
-    height: 46px;
-    border-radius: 8px;
-    background-color: $menuBorderColor;
-    flex: 0 0 auto;
-  }
-
-  // remove AG Grid focus ring visuals - keep accessible focus where needed
-  .ag-cell-focus,
-  .ag-cell:focus,
-  .ag-cell:focus-within,
-  .ag-cell.ag-cell-focus {
-    outline: none;
-    box-shadow: none;
-    border: none; // Commented out to allow custom focus borders in list-mode
-  }
-
-  .ag-cell-focus::after,
-  .ag-cell:focus::after,
-  .ag-cell:focus-within::after {
-    content: none;
-    display: none;
-  }
-
-  // kill selection pseudo elements that produce blue bars
-  .ag-cell.ag-cell-range-selected::after,
-  .ag-cell.ag-cell-range-single-cell::after,
-  .ag-cell.ag-cell-range-top::after,
-  .ag-cell.ag-cell-range-bottom::after,
-  .ag-cell.ag-cell-range-left::after,
-  .ag-cell.ag-cell-range-right::after {
-    content: none;
-  }
-
-  // header cell visual rounding
-  .ag-header .ag-header-cell:first-child {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-
-  .ag-header .ag-header-cell:last-child {
-    overflow: hidden;
-  }
-}
-
-// Advance Sort Modal
-.advance-sort-modal {
-  .advance-sort-modal-body {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .advance-sort-section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .advance-sort-section-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: $darkColor;
-  }
-
-  .advance-sort-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .advance-sort-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px;
-    background: white;
-    border-radius: 8px;
-    cursor: grab;
-    box-shadow: 0px 0px 4px 0px #0000001f;
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  .advance-sort-row-content {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    .advance-sort-drag-indicator {
-      color: $textButtonFontColor;
-      height: 1.25em;
-      margin-top: 26px;
-    }
-  }
-
-  .advance-sort-field-group {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .advance-sort-priority-group {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    .divider-line {
-      height: 12px;
-      width: 1px;
-      background: $disabledSecondaryBorder;
-    }
-  }
-
-  .advance-sort-footer-actions {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    .advance-sort-add-level-button {
-      .ia-btn-icon {
-        margin-bottom: 6px;
-        svg {
-          width: 12px;
-          height: 12px;
-        }
-      }
-    }
-  }
-}