@use "sass:map";
@use "sass:list";
@import url("./assets/theme.css");
@import url("./assets/sccoreui.css");
@import url("./assets/flex.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
@import url("./assets/sccoreicons.css");

// variables

@font-face {
  font-family: "RobotoBold";
  src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "RobotoMedium";
  src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoItalic";
  src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoRegular";
  src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --fw-600: 600;
  --fw-400: 400;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-16: 16px;
  --lh: 24px;
  --fs-14: 14px;
  --grey-bg: #101828;
  --border-none: border-none;
  --box-shadow-none: none;
  --_primary-800: #0e184f;
  --_primary-700: #111c5b;
  --_primary-600: #132067;
  --_primary-500: #162578;
  --_primary-400: #243dc6;
  --_primary-300: #d0d5dd;
  --_primary-100: #ced4f6;
  --_primary-200: #8794db;
  --_primary-50: #e2e5fa;
  --_primary-25: #f5f6fd;

  --_gray-700: #344054;
  --_gray-800: #1d2939;
  --_gray-200: #eaecf0;
  --_gray-300: #d0d5dd;
  --_gray-50: #f9fafb;
  --_base-white: #fff;

  --_text-secondary-600: #475467;
  --_outline-800: #1d2939;
  --_outline-200: #eaecf0;
  --_outline-300: #d0d5dd;
  --_outline-50: #f9fafb;
  --_base-white: #fff;
}

@mixin flex($justify: flex-start, $align: center, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

@mixin auto__h($height: 0px) {
  height: calc(100vh - $height);
  overflow-y: auto;
}

@mixin grid__responsive($minWidth: 350px, $maxWidth: 500px) {
  display: var(--_d-grid);
  grid-template-columns: repeat(auto-fill, min($minWidth, $maxWidth));
  width: 100%;
  & > div {
    width: 100%;
  }
}

.p-button {
  border: 0 !important;
  &.btn-primary {
    background-color: var(--primary-500);
    color: var(--_base-white);
    padding: 8px 14px;
    &:hover {
      background-color: var(--primary-700);
    }
    &:focus {
      background-color: var(--primary-700);
    }
    &:disabled {
      background-color: var(--primary-200);
      color: var(--_base-white);
    }
  }

  &.btn-text-outline {
    background-color: var(--_bg-white);
    color: var(--gray-700);
    padding: 8px 14px;
    border: 1px solid var(--gray-300) !important;
    svg {
      path {
        stroke: var(--gray-700);
      }
    }
    &:has(svg) {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    &:hover {
      background-color: var(--primary-25) !important;
      border: 1px solid var(--primary-100) !important;
      color: var(--primary-400) !important;
      svg {
        path {
          stroke: var(--primary-400);
        }
      }
    }
    &:focus {
      background-color: var(--primary-25) !important;
      color: var(--primary-600) !important;
    }
    &:disabled {
      color: var(--gray-300);
    }
  }

  &.btn-secondary {
    background-color: var(--primary-50);
    color: var(--primary-500);
    padding: 8px 14px;
    &:hover {
      background-color: var(--primary-100) !important;
      color: var(--primary-800) !important;
    }
    &:focus {
      background-color: var(--primary-100);
    }
    &:disabled {
      background-color: var(--primary-50);
      color: var(--gray-300);
    }
  }

  &.btn-text {
    background-color: var(--_base-white);
    color: var(--gray-600);
    padding: 8px 14px;
    border: 0 !important;
    font-weight: 600;
    &:hover {
      background-color: var(--gray-50) !important;
      color: var(--gray-700) !important;
    }
    &:focus {
      background-color: var(--gray-50);
      color: var(--gray-700);
      border: 0px !important;
    }
    &:disabled {
      background-color: var(--primary-50) !important;
      color: var(--gray-300);
    }
  }
  &.btn-text-primary {
    background-color: var(--_base-white);
    color: var(--primary-400);
    padding: 8px 14px;
    border: 0 !important;
    display: flex;
    gap: 4px;
    align-items: center;
    &:hover {
      background-color: var(--primary-25) !important;
      color: var(--primary-600) !important;
      svg {
        path {
          stroke: var(--primary-600);
        }
      }
    }
    &:focus {
      background-color: var(--primary-25) !important;
      color: var(--primary-600) !important;
    }
    // &:disabled {
    //   color: var(--gray-300);
    // }

    svg {
      path {
        stroke: var(--primary-400);
      }
    }
  }
}

// height and width utility classes

.h-40 {
  height: 40px;
}

.h-44 {
  height: 44px !important;
}

// @font-face {
//   font-family: "Lato";
// }

// @font-face {
//   font-family: "Lato";
//   font-weight: 600;
//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
// }

body {
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 20px;
  padding: 0;
  margin: 0;
  color: var(--gray-700);
}

code {
  font-family: "Lato", sans-serif;
}

.pr-60 {
  padding-right: 60px !important;
}

.delete-action {
  &:hover {
    transition: all 0.4 ease-in-out;
    transform: scale(1.2);
    svg {
      path {
        stroke: var(--red-400);
      }
    }
  }
}

// h1 {
//   font-size: var(--fs-24);
//   font-weight: var(--fw-600);
// }

// h2 {
//   font-size: var(--fs-18);
//   font-weight: var(--fw-600);
// }

// h3 {
//   font-size: var(--fs-16);
//   font-weight: var(--fw-400);
// }

// ============= Button styles ===============  //
// .btn-primary {
//   @include btn(primary);
// }

// .btn-secondary {
//   @include btn(secondary);
// }

// .btn-outline {
//   @include btn(outline);
// }

// .btn-text {
//   @include btn(text);
// }

// ============= custom progress steps ===============  //

.progress-container {
  isolation: isolate;

  &::before {
    content: "";
    background-color: var(--gray-200);
    position: absolute;
    z-index: -1;
  }

  &.horizontal::before {
    height: 2px;
    width: 100%;
    top: 11%;
  }

  &.vertical::before {
    height: 100%;
    width: 2px;
    left: 5%;
    top: 0;
  }
}

.progressbar {
  z-index: -1;
  transition: all 0.6s ease;

  &.horizontal {
    left: 0;
    height: 2px;
    top: 11%;
  }

  &.vertical {
    width: 2px;
    left: 5%;
    top: 0;
  }
}

// .col-gr-icon-lg {
//   width: 20px;
//   animation: scaleImgLarge 0.4s forwards;
// }

// .col-gr-icon-sm {
//   width: 0px;
//   animation: scaleImgsmall 0.4s forwards;
// }

// @keyframes scaleImgLarge {
//   0% {
//     width: 0;
//   }
//   100% {
//     width: 20px;
//   }
// }

// @keyframes scaleImgsmall {
//   100% {
//     width: 20px;
//   }
//   0% {
//     width: 0px;
//   }
// }

.col-gr-icon {
  width: 0;
  transition: width 0.4s ease;
}

.col-gr-icon-active {
  width: 20px;
  transition: width 0.4s ease; /* Ensure transition applies both ways */
}

.no-content {
  text-align: center;
  padding: 10px;
}

.progress-step-item {
  &.horizontal {
    &:nth-of-type(1) {
      transform: translateX(-50%);
    }

    &:last-child {
      transform: translateX(50%);
    }
  }

  &.vertical {
    transform: translateY(50%);

    &:nth-of-type(1) {
      transform: translateY(-5%);
    }

    &:last-child {
      transform: translateY(100%);
    }
  }
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.2;
}

// CUSTOM multiselect style started
.Multi_select_dropdown_panel {
  .p-multiselect-header {
    display: block;
    padding: 8px 0;

    .p-checkbox,
    .p-multiselect-close {
      display: none;
    }

    .p-multiselect-filter-container {
      .p-inputtext {
        padding-right: 12px;
        padding-left: 1.75rem;
      }

      .p-multiselect-filter-icon {
        left: 0.55rem;
      }
    }
  }

  .p-multiselect-items-wrapper {
    .p-multiselect-item.p-highlight {
      &::after {
        // content: "";
        // width: 14px;
        // height: 6px;
        // border-left: 2px solid #132067;
        // border-bottom: 2px solid #132067;
        // transform: rotate(-45deg);
        // position: absolute;
        // right: 10px;
        content: url("./assets/png/checkmark_icon.png");
        position: absolute;
        top: 48%;
        right: 8px;
        transform: translateY(-50%);
      }
    }
  }
}

.bulk-action-feature {
  .p-overlaypanel-content {
    padding: 0 !important;
    border-radius: 6px !important;
  }
}

.column_group_overlay {
  overflow: hidden;

  .p-overlaypanel-content {
    padding: 0px !important;
  }
}

.list-items {
  padding: 4px;
  border: 0;

  .p-treenode-content {
    padding: 2px !important;
  }

  .p-treenode-droppoint {
    height: 2px;
  }
}

.sc_custom_multiselect {
  width: max-content;

  * {
    color: #344054;
    font-weight: 700;
  }

  .left_section_item {
    left: 1rem;
  }

  .right_section_item {
    right: 1rem;
  }

  .selected_moreThan_one {
    right: 40px;
  }

  .p-inputwrapper-filled {
    background: #f5f6fd;
    border: 1px solid #8190e8;
  }

  .p-multiselect {
    max-width: 100%;
    width: max-content !important;

    .p-multiselect-label {
      padding: 0;
      padding-left: 44px;
      max-width: 100%;
      height: 100%;

      .p-multiselect-token {
        border: none;
        width: 100%;
        min-width: 100%;
        background: none;
        padding-left: 0;

        .p-multiselect-token-label {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      // svg {
      //   display: none;
      // }
    }
  }

  .p-multiselect-trigger {
    width: 2rem;

    // svg {
    //   display: none;
    // }
  }
}

// .no_icon {
//   .p-multiselect-label {
//     padding-left: 16px !important;
//   }
// }

.status_dropdown {
  .p-multiselect {
    .p-multiselect-label {
      padding-left: 34px;
    }
  }

  .select_status_prv {
    ul {
      li {
        width: 10px;
        height: 10px;
        border-radius: var(--border-radius);
        position: absolute;
        transform: translateY(-50%);
      }

      li.all {
        background: #667085;
      }

      li:nth-child(2) {
        left: 6px;
      }

      li:nth-child(3) {
        left: 12px;
      }
    }
  }
}
.table_filters_1 {
  height: auto;
  display: flex;
  // justify-content: center;
  align-items: center;
  padding: 10px 0px !important;

  .chip_comp {
    height: 44px !important;
    border: 1px solid var(--gray-300);
    overflow-y: auto;
    .p-inputtext {
      padding: 6px 20px 7px 20px;
      height: 44px !important;
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
  }

  .p-chips-multiple-container {
    padding: 7px 10px 6px 10px;
    width: 100%;
    // max-height: 40px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    overflow: auto;
    height: 44px;
    .p-chips-token {
      .p-chips-token-label {
        white-space: nowrap;
      }
    }

    &:not(.p-disabled):hover {
      border-color: var(--gray-300);
    }

    &:not(.p-disabled).p-focus {
      box-shadow: none;
    }
  }
}

.conditional_btn {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  // &:hover {
  //   background-color: var(--primary-25);
  //   border-radius: 6px;
  // }
}

.multi-pl-32 {
  padding-left: 40px;
  border: 1px solid red;
}

.selected_multile {
  .p-multiselect-token-label {
    padding-right: 18px;
    height: 100%;
  }
  .p-multiselect-label {
    height: 100%;
  }
}

.selected_multile.selected_num_2 {
  .p-multiselect .p-multiselect-label {
    padding-left: 12px;
  }
}

.selected_attributes {
  // height: calc(100vh - 180px);
  overflow-y: auto;
}

.selected_multile.selected_num_3,
.selected_multile.moreThanThreeItems {
  .p-multiselect .p-multiselect-label {
    padding-left: 12px;
  }
}

.mutli_select_status {
  .p-multiselect-label {
    padding-left: 44px !important;
  }
}

.status_dropdown.selected_multile {
  .left_section_item {
    max-width: 28px;
    overflow: hidden;
    height: 11px;
    width: -webkit-fill-available;
    align-items: center;
    display: flex;
  }
}

.status_dropdown_item.Active::before {
  background: #12b76a;
}

.status_dropdown_item.Inactive::before {
  background: #f04438;
}

.status_dropdown_item.Draft::before {
  background: #162578;
}

.status_dropdown_item {
  .status_dot {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 10px;
  }
}

.custom_date_picker_sec {
  .custom_date_picker {
    .p-inputtext {
      padding-right: 16px;
      width: 130px;
    }

    .p-inputtext {
      &:enabled {
        &:focus {
          box-shadow: none !important;
          border-color: #d0d5dd !important;
        }
      }
    }

    .p-datepicker-trigger {
      &:focus {
        box-shadow: none !important;
        border-color: #d0d5dd !important;
      }
    }
  }

  .custom_date_picker.multiple {
    .p-inputtext {
      width: 236px;
    }
  }

  .clear_icon_sec {
    right: 32px;
  }
}

.date_filter {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0px;
  background: #fff;
  height: 100%;
  padding: 4px 16px;

  li {
    height: 40px;

    &:hover {
      background: #f9fafb;
    }
  }

  .active {
    background: #f9fafb;
  }
}

div:has(ul.date_filter) .p-datepicker-group-container {
  padding-left: 116px;
  margin: -8px;
}

.bottom_date_filters {
  width: calc(100% - 116px);
  border-left: 1px solid #dee2e6;
}

div:has(ul.date_filter)
  .p-datepicker-group-container
  .p-datepicker
  table
  td
  > span {
  width: 40px;
  height: 40px;
}

div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
  width: 328px;
  max-width: 328px;
  padding: 8px 20px !important;
  border: 1px solid #dee2e6;
  border-top: 0;
}

div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
  border-right: 0;
}

div:has(ul.date_filter) .p-datepicker-group-container table td {
  padding: 0;
}

div:has(ul.date_filter) .p-datepicker-footer {
  margin: -8px;
}

.panel_status {
  .p-multiselect-filter-container {
    display: none;
  }

  .p-multiselect-header {
    padding: 0 !important;
    border-bottom: 0;
  }
}

.p-multiselect-panel {
  .p-multiselect-items {
    padding: 4px;
    min-width: 140px !important;
  }
}

.panel_withIcon.p-multiselect-panel {
  .p-multiselect-items {
    .p-multiselect-item {
      padding: 0 10px;
    }
  }
}

.Multi_select_dropdown_panel.hidePanelHeader {
  .p-multiselect-header {
    display: none;
  }
}

// .errorField {
//   color: var(--red-500);
//   height: auto;
//   line-height: 20px;
// }

.full_form_field {
  // width: 37.125rem;
  width: 100%;
}

.form_field {
  // width: 18.063rem;
  width: 100%;
  &:has(.p-multiselect-token) {
    .p-multiselect-label {
      padding-left: 6px;
    }
  }
}

.PhoneInput {
  background: #ffffff;
  border: 1px solid var(--gray-300);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  border-radius: var(--border-radius);
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
  padding-left: 0px;
  height: 40px;

  :focus-visible {
    outline: none;
  }

  &:focus-within {
    outline: 0 none;
    outline-offset: 0;
    box-shadow:
      0px 1px 2px rgba(16, 24, 40, 0.05),
      0px 0px 0px 2px var(--primary-100);
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-300);
  }

  .PhoneInputInput {
    border: none;
  }
}

.PhoneInputCountry {
  .PhoneInputCountryIcon--border {
    box-shadow: none;
    background-color: #ffffff;
  }

  .PhoneInputCountryIconImg {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
}

.phoneNumberClass {
  margin-left: 14.5rem;
}

#customCountryDropDown {
  .p-dropdown {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;

    .p-dropdown-label {
      padding: 0;
      padding-right: 4px;
    }

    .p-dropdown-trigger {
      padding-top: 20px;
    }

    .p-dropdown-trigger[aria-expanded="true"] {
      padding-bottom: 20px;
    }
  }
}

.customNumberField {
  .p-inputnumber-input {
    padding-left: 24px;
  }
}

.text-editor {
  button {
    &::after {
      content: none !important;
    }
  }
}

button#formatULOptions-1:hover::before,
button#formatULOptions-1.fr-btn-hover::before,
button#formatULOptions-1.fr-active::before,
button#formatOLOptions-1:hover::before,
button#formatOLOptions-1.fr-btn-hover::before,
button#formatOLOptions-1.fr-active::before {
  content: "";
  border: 2px solid gray;
  border-left: 0;
  border-top: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 2px;
  top: 39%;
  transform: rotate(45deg);
}

.fr-toolbar .fr-btn-grp {
  display: inline-block;
  margin: 0 0px 0 12px !important;
}

.fr-buttons.fr-tabs {
  display: none;
}

.fr-element {
  padding: 12px !important;
}

.fr-command.fr-btn
  + .fr-dropdown-menu
  .fr-dropdown-wrapper
  .fr-dropdown-content
  ul.fr-dropdown-list
  li
  a.fr-active {
  background: #f9fafb !important;
}

button[data-cmd="fontFamily"]:focus {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 2px var(--primary-100);
  border: 1px solid var(--primary-300) !important;
  background: none !important;
}

.text-editor {
  border: 1px solid #d0d5dd;
  border-radius: var(--border-radius);

  * {
    border: none !important;
  }
}

.text-editor.focus-text-editor {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 4px var(--primary-100);
  border: 1px solid var(--primary-300) !important;
}

.text-editor.p-invalid.focus-text-editor {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 4px var(--red-100);
  border: 1px solid var(--red-300) !important;
}

button[data-cmd="fontFamily"] {
  border: 1px solid var(--gray-300) !important;

  &::before {
    content: "";
    border: 1.8px solid #0b0c12;
    border-left: 0;
    border-top: 0;
    width: 7px;
    height: 7px;
    position: absolute;
    right: 8px;
    top: 39%;
    transform: rotate(45deg);
  }
}

.fr-toolbar .fr-btn-grp {
  margin-right: 0px;
  margin-left: 8px;
}

.fr-wrapper .fr-placeholder {
  color: #667085 !important;
}

button[aria-expanded="true"] {
  &::before {
    top: 48%;
    transform: rotate(-136deg);
  }
}

/// Custon treeDropdownSelect style
.treeNoCollaps {
  li {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-tree-toggler {
    display: none;
  }

  .treeBadge {
    background: var(--Gray-100, #f2f4f7) !important;
  }

  .p-treenode-content:hover {
    background: var(--Primary-25, #f5f6fd) !important;
  }

  .p-treenode-content:hover .treeItem,
  .p-treenode-content:focus .treeItem {
    color: var(--primary-400);

    .treeBadge {
      color: var(--Primary-400, #243dc6) !important;
      background: var(--Primary-50, #e2e5fa) !important;
    }
  }

  .p-treenode-content:hover svg path,
  .p-treenode-content:focus svg path {
    stroke: var(--primary-400) !important;
  }

  .p-treenode-content:focus {
    box-shadow: none !important;
    outline: none !important;
    background: var(--Primary-25, #f5f6fd) !important;

    .treeBadge {
      color: var(--Primary-400, #243dc6) !important;
      background: var(--Primary-50, #e2e5fa) !important;
    }
  }
}

/// Custon treeDropdownSelect style end /////////////////

/////// Custom list_box_dropdown ///////////

.icon-30x30 {
  height: 30px !important;
  width: 30px !important;
}

.icon-38x38 {
  height: 38px !important;
  width: 38px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-40x40 {
  height: 40px !important;
  width: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  &.feature-hover {
    &:hover {
      svg {
        path {
          stroke: var(--primary-400);
        }
      }
    }
  }
}

.p-button.sc_list_box_btn {
  height: auto;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  color: var(--primary-400);
  background-color: transparent;
  svg {
    path {
      stroke: var(--primary-400);
    }
  }
  &:enabled {
    &:hover {
      background-color: var(--primary-25);
      border-radius: var(--border-radius);
      color: var(--primary-400);
      svg {
        path {
          stroke: var(--primary-400);
        }
      }
    }
  }
}

.p-button.list_box_btn {
  font-weight: 600;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  padding-inline: 6px 10px !important;
  color: var(--primary-400);
  background: transparent;

  &:not(.section_btn) {
    height: 28px;
  }
  &.section_btn {
    padding: 6px 10px 6px 6px;
  }
  &:hover {
    background-color: var(--primary-25);
    color: var(--primary-700);
    svg {
      path {
        stroke: var(--primary-700);
      }
    }
  }
  &:has(svg) {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  svg {
    path {
      stroke: var(--primary-400);
    }
  }
}

.p-button.data_label {
  color: var(--gray-600);
  background-color: transparent;
  display: flex;
  gap: 4px;
  svg {
    path {
      stroke: var(--gray-700);
    }
  }

  &:hover {
    background-color: var(--gray-200);
    color: var(--gray-700);
  }
}

.list_box_chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;

  .list_box_chip {
    padding: 3px 4px 3px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 4px;
    svg {
      width: 15px;
      height: 15px;
      path {
        stroke: var(--gray-400);
      }
    }
    &:hover {
      // border: 1px solid var(--gray-300);
      // background-color: var(--primary-25);
      svg {
        transform: scale(1.1);
        cursor: pointer;
        path {
          stroke: var(--gray-700);
        }
      }
    }
  }
}

.listbox_label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
}

.list_box_dropdown {
  .p-listbox-header {
    padding: 12px !important;
    border-top: 1px solid var(--gray-200);
  }

  ul.p-listbox-list {
    padding: 6px;

    li {
      margin: 4px 0 !important;
      border-radius: 6px !important;
      padding: 8px 14px !important;

      .item_content {
        max-width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        // width: 100%;
      }

      .item_icon {
        display: none;
      }

      &:hover {
        background-color: var(--gray-50) !important;
      }

      &:focus {
        box-shadow: none !important;
      }
    }

    .p-highlight {
      background: var(--Primary-25);
      color: #162578 !important;

      .item_icon {
        display: block;
      }
    }
  }
}

/////// Custom list_box_dropdown ///////////

//ScMulti Select//
.sc_multiSelect {
  height: 40px !important;

  .p-multiselect-clear-icon {
    right: 42px !important;
  }

  .p-multiselect-label {
    line-height: 38px !important;
  }

  // .p-multiselect-token-label {
  //   width: 60px;
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  // }
}

.sc_multiSelect.noShowSelectedCount {
  .p-multiselect-label {
    padding-right: 0px;
  }
}

// .sc_multiSelect.hideChipremoveIcon {
//   .p-multiselect-token {
//     svg {
//       display: none;
//     }
//   }
// }

.sc_icon_hover {
  &:hover {
    svg {
      transform: scale(1.1);
      transition: 0.3s all;
    }
  }
}

.hide-focus {
  &:not(.p-disabled) {
    &.p-focus {
      box-shadow: var(--box-shadow-none);
      border: 1px solid var(--gray-300);
    }
  }

  &:enabled {
    &:focus {
      box-shadow: var(--box-shadow-none);
      border: 1px solid var(--gray-300);
    }
  }
}

.sc_multiSelect_panel {
  .p-multiselect-items {
    padding: 4px !important;

    .p-multiselect-item,
    .p-highlight {
      span {
        padding-right: 28px;
      }
    }

    .p-highlight::after {
      content: "";
      width: 12px;
      height: 6px;
      border: solid #162578;
      border-width: 1.9px;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      margin-right: 8px;
      position: absolute;
      right: 4px;
    }
  }
}

//////////////////////////////////////////////
///

.condition_menu {
  width: 648px !important;
}

.condition_attribute_list_sect {
  height: 215px;

  .attr_chip {
    transition: all 0.1s;

    &:hover {
      transform: scale(1.05);
      // transition: all 0.2s;
    }
  }
}

.condition_configure {
  height: 224px;
  outline: none;
  line-height: 30px;
  letter-spacing: 2px;

  .formulaChipElm {
    line-height: 24px;
    letter-spacing: 0px;
  }

  .chip-h-25 {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .formulaSpanElm {
    font-size: 16px;
    margin: 2px 0;
    float: left;
    min-width: 6px;
    height: 32px;
    position: relative;
    top: -4px;

    &:first-child {
      display: none;
    }
  }
}

.operator_divider {
  width: 1px;
  height: 15px;
  display: inline-block;
  background-color: var(--gray-300);
}

.formula_condition_dropdown {
  box-shadow: none !important;

  .p-dropdown-label {
    display: block !important;
  }
}

.p-button.p-button-link:enabled:hover {
  color: var(--primary-400) !important;
}

.p-button.p-button-text:enabled:hover {
  background: var(--primary-50);
}

/* AG GRID - styles */
@import url("./assets/theme.css");
@import url("./assets/sccoreui.css");
@import url("./assets/sccoreicons.css");
@import url("./assets/flex.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");

// variables

@font-face {
  font-family: "RobotoBold";
  src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "RobotoMedium";
  src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoItalic";
  src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoRegular";
  src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --fw-600: 600;
  --fw-400: 400;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-16: 16px;
  --lh: 24px;
  --fs-14: 14px;
  --grey-bg: #101828;
  --border-none: border-none;
}

// height and width utility classes

.h-40 {
  height: 40px;
}

// @font-face {
//   font-family: "Lato";
// }

// @font-face {
//   font-family: "Lato";
//   font-weight: 600;
//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
// }

body {
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 20px;
  padding: 0;
  margin: 0;
  color: var(--gray-700);
}

code {
  font-family: "Lato", sans-serif;
}

// h1 {
//   font-size: var(--fs-24);
//   font-weight: var(--fw-600);
// }

// h2 {
//   font-size: var(--fs-18);
//   font-weight: var(--fw-600);
// }

// h3 {
//   font-size: var(--fs-16);
//   font-weight: var(--fw-400);
// }

// ============= custom progress steps ===============  //

.progress-container {
  isolation: isolate;

  &::before {
    content: "";
    background-color: var(--gray-200);
    position: absolute;
    z-index: -1;
  }

  &.horizontal::before {
    height: 2px;
    width: 100%;
    top: 11%;
  }

  &.vertical::before {
    height: 100%;
    width: 2px;
    left: 5%;
    top: 0;
  }
}

.progressbar {
  z-index: -1;
  transition: all 0.6s ease;

  &.horizontal {
    left: 0;
    height: 2px;
    top: 11%;
  }

  &.vertical {
    width: 2px;
    left: 5%;
    top: 0;
  }
}

.progress-step-item {
  &.horizontal {
    &:nth-of-type(1) {
      transform: translateX(-50%);
    }

    &:last-child {
      transform: translateX(50%);
    }
  }

  &.vertical {
    transform: translateY(50%);

    &:nth-of-type(1) {
      transform: translateY(-5%);
    }

    &:last-child {
      transform: translateY(100%);
    }
  }
}

// CUSTOM multiselect style started
.Multi_select_dropdown_panel {
  .p-multiselect-header {
    display: block;
    padding: 6px;

    .p-checkbox,
    .p-multiselect-close {
      display: none;
    }

    .p-multiselect-filter-container {
      .p-inputtext {
        padding-right: 12px;
        padding-left: 1.75rem;
      }

      .p-multiselect-filter-icon {
        left: 0.55rem;
      }
    }
  }

  .p-multiselect-items-wrapper {
    .p-multiselect-item.p-highlight {
      &::after {
        content: "";
        width: 10px;
        height: 4px;
        border-left: 1px solid #132067;
        border-bottom: 1px solid #132067;
        transform: rotate(-45deg);
        position: absolute;
        right: 10px;
        top: 14px;
      }
    }
  }
}

.bulk-action-feature {
  .p-overlaypanel-content {
    padding: 0 !important;
    border-radius: 6px !important;
  }
}

.column_group_overlay {
  overflow: hidden;

  .p-overlaypanel-content {
    padding: 0px !important;
  }
}

.list-items {
  padding: 4px;
  border: 0;

  .p-treenode-content {
    padding: 2px !important;
  }

  .p-treenode-droppoint {
    height: 2px;
  }
}

.sc_custom_multiselect {
  width: max-content;

  * {
    color: #344054;
    font-weight: 700;
  }

  .left_section_item {
    left: 1rem;
  }

  .right_section_item {
    right: 1rem;
  }

  .selected_moreThan_one {
    right: 40px;
  }

  .p-inputwrapper-filled {
    background: #f5f6fd;
    border: 1px solid #8190e8;
  }

  .p-multiselect {
    max-width: 100%;
    width: max-content !important;

    .p-multiselect-label {
      // padding: 0;
      padding-left: 12px !important;
      max-width: 100%;

      .p-multiselect-token {
        border: none;
        width: 100%;
        min-width: 100%;
        background: none;
        padding-left: 0;
        line-height: 40px;

        .p-multiselect-token-label {
          width: 55px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 100%;
          // text-align: center;
        }
      }

      svg {
        display: none;
      }
    }
  }

  .p-multiselect-trigger {
    width: 2rem;

    // svg {
    //   display: none;
    // }
  }
}

.currency_with_input {
  display: flex;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  input {
    border: 0px !important;
    padding-inline: 0;
    &:focus {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }
  }
  .p-inputnumber .p-inputnumber-input {
    padding-inline: 0;
  }
  &:focus-within {
    border: 1px solid var(--primary-300);
    outline: 2px solid var(--primary-50);
  }
}

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}

// .no_icon {
//   .p-multiselect-label {
//     padding-left: 16px !important;
//   }
// }

.status_dropdown {
  .p-multiselect {
    .p-multiselect-label {
      padding-left: 34px;
      height: 100%;
    }
  }

  .select_status_prv {
    ul {
      li {
        width: 10px;
        height: 10px;
        border-radius: var(--border-radius);
        position: absolute;
        transform: translateY(-50%);
      }

      li.all {
        background: #667085;
      }

      li:nth-child(2) {
        left: 6px;
      }

      li:nth-child(3) {
        left: 12px;
      }
    }
  }
}

.multi-pl-32 {
  padding-left: 40px;
  border: 1px solid red;
}

.selected_multile {
  .p-multiselect-token-label {
    padding-right: 18px;
  }
}

.selected_multile.selected_num_2 {
  .p-multiselect .p-multiselect-label {
    padding-left: 12px;
    height: 100%;
  }
}

.selected_multile.selected_num_3,
.selected_multile.moreThanThreeItems {
  .p-multiselect .p-multiselect-label {
    padding-left: 12px;
  }
}

.mutli_select_status {
  .p-multiselect-label {
    padding-left: 12px !important;
    height: 100%;
  }
}

.status_dropdown.selected_multile {
  .left_section_item {
    max-width: 28px;
    overflow: hidden;
    height: 11px;
    width: -webkit-fill-available;
    align-items: center;
    display: flex;
  }
}

.status_dropdown_item.Active::before {
  background: #12b76a;
}

.status_dropdown_item.Inactive::before {
  background: #f04438;
}

.status_dropdown_item.Draft::before {
  background: #162578;
}

.status_dropdown_item {
  .status_dot {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 10px;
  }
}

.custom_date_picker_sec {
  .custom_date_picker {
    .p-inputtext {
      padding-right: 16px;
      width: 130px;
    }

    .p-inputtext {
      &:enabled {
        &:focus {
          box-shadow: none !important;
          border-color: #d0d5dd !important;
        }
      }
    }

    .p-datepicker-trigger {
      &:focus {
        box-shadow: none !important;
        border-color: #d0d5dd !important;
      }
    }
  }

  .custom_date_picker.multiple {
    .p-inputtext {
      width: 236px;
    }
  }

  .clear_icon_sec {
    right: 32px;
  }
}

.date_filter {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0px;
  background: #fff;
  height: 100%;
  padding: 4px 16px;

  li {
    height: 40px;

    &:hover {
      background: #f9fafb;
    }
  }

  .active {
    background: #f9fafb;
  }
}

div:has(ul.date_filter) .p-datepicker-group-container {
  padding-left: 116px;
  margin: -8px;
}

.bottom_date_filters {
  width: calc(100% - 116px);
  border-left: 1px solid #dee2e6;
}

div:has(ul.date_filter)
  .p-datepicker-group-container
  .p-datepicker
  table
  td
  > span {
  width: 40px;
  height: 40px;
}

div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
  width: 328px;
  max-width: 328px;
  padding: 8px 20px !important;
  border: 1px solid #dee2e6;
  border-top: 0;
}

div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
  border-right: 0;
}

div:has(ul.date_filter) .p-datepicker-group-container table td {
  padding: 0;
}

div:has(ul.date_filter) .p-datepicker-footer {
  margin: -8px;
}

.panel_status {
  .p-multiselect-filter-container {
    display: none;
  }

  .p-multiselect-header {
    padding: 0 !important;
    border-bottom: 0;
  }
}

.p-multiselect-panel {
  .p-multiselect-items {
    padding: 4px;
    min-width: 140px !important;
  }
}

.p-multiselect {
  .p-multiselect-header {
    .p-multiselect-close {
      display: none !important;
    }
  }
  .p-multiselect-items {
    .p-multiselect-item {
      border-radius: 4px !important;
    }
  }
}
.grid-global-search {
  width: 21rem;
  .p-input-icon-left {
    width: 100%;
  }
  .p-inputtext {
    width: 100%;
  }
}

.panel_withIcon.p-multiselect-panel {
  .p-multiselect-items {
    .p-multiselect-item {
      padding: 0 10px;
    }
  }
}

.Multi_select_dropdown_panel.hidePanelHeader {
  .p-multiselect-header {
    display: none;
  }
}

.errorField {
  color: var(--red-500);
  max-height: 50px;
  padding-block: 2px 6px;
}

.full_form_field {
  // width: 37.125rem;
}

.form_field {
  // width: 18.063rem;
}

.PhoneInput {
  background: #ffffff;
  border: 1px solid var(--gray-300);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  border-radius: var(--border-radius);
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
  padding-left: 0px;
  height: 40px;

  :focus-visible {
    outline: none;
  }

  &:focus-within {
    outline: 0 none;
    outline-offset: 0;
    box-shadow:
      0px 1px 2px rgba(16, 24, 40, 0.05),
      0px 0px 0px 2px var(--primary-100);
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-300);
  }

  .PhoneInputInput {
    border: none;
  }
}

.PhoneInputCountry {
  .PhoneInputCountryIcon--border {
    box-shadow: none;
    background-color: #ffffff;
  }

  .PhoneInputCountryIconImg {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
}

.phoneNumberClass {
  margin-left: 14.5rem;
}

#customCountryDropDown {
  .p-dropdown {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;

    .p-dropdown-label {
      padding: 0;
      padding-right: 4px;
    }

    .p-dropdown-trigger {
      padding-top: 20px;
    }

    .p-dropdown-trigger[aria-expanded="true"] {
      padding-bottom: 20px;
    }
  }
}

.customNumberField {
  .p-inputnumber-input {
    padding-left: 24px;
  }
}

.text-editor {
  button {
    &::after {
      content: none !important;
    }
  }
}

button#formatULOptions-1:hover::before,
button#formatULOptions-1.fr-btn-hover::before,
button#formatULOptions-1.fr-active::before,
button#formatOLOptions-1:hover::before,
button#formatOLOptions-1.fr-btn-hover::before,
button#formatOLOptions-1.fr-active::before {
  content: "";
  border: 2px solid gray;
  border-left: 0;
  border-top: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 2px;
  top: 39%;
  transform: rotate(45deg);
}

.fr-toolbar .fr-btn-grp {
  display: inline-block;
  margin: 0 0px 0 12px !important;
}

.fr-buttons.fr-tabs {
  display: none;
}

.fr-element {
  padding: 12px !important;
}

.fr-command.fr-btn
  + .fr-dropdown-menu
  .fr-dropdown-wrapper
  .fr-dropdown-content
  ul.fr-dropdown-list
  li
  a.fr-active {
  background: #f9fafb !important;
}

button[data-cmd="fontFamily"]:focus {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 2px var(--primary-100);
  border: 1px solid var(--primary-300) !important;
  background: none !important;
}

.text-editor {
  border: 1px solid #d0d5dd;
  border-radius: var(--border-radius);

  * {
    border: none !important;
  }
}

.text-editor.focus-text-editor {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 4px var(--primary-100);
  border: 1px solid var(--primary-300) !important;
}

.text-editor.p-invalid.focus-text-editor {
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px 4px var(--red-100);
  border: 1px solid var(--red-300) !important;
}

button[data-cmd="fontFamily"] {
  border: 1px solid var(--gray-300) !important;

  &::before {
    content: "";
    border: 1.8px solid #0b0c12;
    border-left: 0;
    border-top: 0;
    width: 7px;
    height: 7px;
    position: absolute;
    right: 8px;
    top: 39%;
    transform: rotate(45deg);
  }
}

.fr-toolbar .fr-btn-grp {
  margin-right: 0px;
  margin-left: 8px;
}

.fr-wrapper .fr-placeholder {
  color: #667085 !important;
}

button[aria-expanded="true"] {
  &::before {
    top: 48%;
    transform: rotate(-136deg);
  }
}

/// Custon treeDropdownSelect style
.treeNoCollaps {
  li {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-tree-toggler {
    display: none;
  }

  .treeBadge {
    background: var(--Gray-100, #f2f4f7) !important;
  }

  .p-treenode-content:hover {
    background: var(--Primary-25, #f5f6fd) !important;
  }

  .p-treenode-content:hover .treeItem,
  .p-treenode-content:focus .treeItem {
    color: var(--primary-400);

    .treeBadge {
      color: var(--Primary-400, #243dc6) !important;
      background: var(--Primary-50, #e2e5fa) !important;
    }
  }

  .p-treenode-content:hover svg path,
  .p-treenode-content:focus svg path {
    stroke: var(--primary-400) !important;
  }

  .p-treenode-content:focus {
    box-shadow: none !important;
    outline: none !important;
    background: var(--Primary-25, #f5f6fd) !important;

    .treeBadge {
      color: var(--Primary-400, #243dc6) !important;
      background: var(--Primary-50, #e2e5fa) !important;
    }
  }
}

/// Custon treeDropdownSelect style end /////////////////

/////// Custom list_box_dropdown ///////////
.list_box_dropdown {
  .p-listbox-header {
    padding: 12px !important;
    border-top: 1px solid var(--gray-200);
  }

  ul.p-listbox-list {
    padding: 6px;

    li {
      margin: 4px 0 !important;
      border-radius: 6px !important;
      padding: 8px 14px !important;

      .item_content {
        max-width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        // width: 100%;
      }

      .item_icon {
        display: none;
      }

      &:hover {
        background-color: var(--gray-50) !important;
      }

      &:focus {
        box-shadow: none !important;
      }
    }

    .p-highlight {
      background: var(--Primary-25);
      color: #162578 !important;

      .item_icon {
        display: block;
      }
    }
  }

  .selected-none {
    ul {
      li.p-highlight {
        display: none !important;
      }
    }
  }
}

/////// Custom list_box_dropdown ///////////

//ScMulti Select//
.sc_multiSelect {
  height: 40px !important;

  .p-multiselect-clear-icon {
    right: 42px !important;
  }

  .p-multiselect-label {
    line-height: 38px !important;
    height: 100%;
  }
}

.sc_multiSelect.noShowSelectedCount {
  .p-multiselect-label {
    padding-right: 0px;
  }
}

// .sc_multiSelect.hideChipremoveIcon {
//   .p-multiselect-token {
//     svg {
//       display: none;
//     }
//   }
// }

.sc_multiSelect_panel {
  .p-multiselect-items {
    padding: 4px !important;

    .p-multiselect-item,
    .p-highlight {
      span {
        padding-right: 28px;
      }
    }

    .p-highlight::after {
      content: "";
      width: 12px;
      height: 6px;
      border: solid #162578;
      border-width: 1.9px;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      margin-right: 8px;
      position: absolute;
      right: 4px;
    }
  }
}

//////////////////////////////////////////////
///

.condition_menu {
  width: 648px !important;
}

.condition_attribute_list_sect {
  height: 215px;

  .attr_chip {
    transition: all 0.1s;

    &:hover {
      transform: scale(1.05);
      // transition: all 0.2s;
    }
  }
}

.condition_configure {
  height: 224px;
  outline: none;
  line-height: 30px;
  letter-spacing: 2px;

  .formulaChipElm {
    line-height: 24px;
    letter-spacing: 0px;
    margin: 2px;
    float: left;
  }

  .formulaSpanElm {
    font-size: 16px;
    margin: 2px 0;
    float: left;
    min-width: 6px;
    height: 32px;
  }
}

.formula_condition_dropdown {
  box-shadow: none !important;

  .p-dropdown-label {
    display: block !important;
  }
}

.p-button.p-button-link:enabled:hover {
  color: var(--primary-400) !important;
}

/* AG GRID - styles */
.ag-grid-container {
  background: #fff !important;
  box-shadow: 0px 0px 1px var(--gray-300) !important;
  overflow: hidden;
  .ag-root-wrapper {
    &.ag-layout-normal {
      border: 0;
    }
  }
}

.ag-header {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

.ag-root-wrapper {
  border-radius: 0 !important;
}

.ag-body-horizontal-scroll {
  display: none !important;
}

.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
  border: 0;
  border-color: initial;
}

.ag-ltr .ag-cell {
  display: flex;
  align-items: center;
}

.ag-grid-container {
  // border: 1px solid var(--gray-200) !important;
  background: #fff !important;
  box-shadow: 0px 0px 1px var(--gray-300);
}

// .ag-row {
//   border-bottom: 1px solid var(--gray-200);
// }

.ag-row-odd {
  background-color: var(--gray-25) !important;
}

.ag-row:focus {
  background-color: var(--gray-100);
}

/* ErrorBoundary.module.css */
.errorContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: auto;
  border-radius: var(--border-radius);
  background-color: var(--red-50);
  width: 100%;
  height: 100%;
  text-align: center;
}

.error_description {
  // width: 750px;
}

.rounded_btn {
  padding: 8px 10px !important;
  height: auto;
  border-radius: 6px !important;
  cursor: pointer;
  &:hover {
    background: var(--primary-25);
  }
}

.ag-grid-container {
  &:has(.web-cards) {
    .grid-header {
      position: sticky;
      top: 0;
    }
  }
}

.p-button {
  &.p-button-secondary {
    padding: 8px 12px;
  }
  &.p-button-outline {
    padding: 8px 12px;
  }

  padding: 8px 12px;

  .p-button-label {
    font-weight: 600;
  }

  &.p-disabled {
    opacity: 0.2 !important;
    border: 0;
  }
}

.ag-theme-quartz {
  --ag-active-color: var(--gray-300);
}

.ag-ltr .ag-header-viewport .ag-header-cell-resize::after {
  background-color: var(--gray-200);
  width: 2px;
}

.p-dropdown-panel .p-dropdown-items {
  padding-left: 0;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  margin-bottom: 0px;
}

.column-group {
  padding: 0 !important;
  .p-overlaypanel-content {
    padding: 0 !important;
    .column-header,
    .column-footer {
      padding: 16px;
    }
  }
}

.w-25 {
  width: 25%;
}

.lh-44 {
  line-height: 44px;
}

.lh-40 {
  line-height: 40px;
}

.br-8 {
  border-radius: 8px;
}

/* conditions  */

.status_select_field {
  .p-dropdown-item {
    height: 40px;
  }
}
.filter-dropdowns {
  padding: 2px;

  .p-dropdown:not(.p-disabled).p-focus {
    box-shadow: none !important;
  }

  .condition-dropdown {
    width: 12rem !important;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid var(--gray-300) !important;

    .p-dropdown .p-dropdown-label.p-inputtext {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .p-inputtext:enabled:focus {
      outline: 0 none;
      outline-offset: 0;
      box-shadow: none !important;
      border-radius: var(--border-radius);
    }

    .p-inputtext:enabled:focus {
      outline: 0 none;
      outline-offset: 0;
      box-shadow: none !important;
      border-radius: var(--border-radius);
    }
  }

  .operator-type {
    height: 44px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .condition-type {
    // width: 120px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;

    .p-dropdown .p-dropdown-label.p-inputtext {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .filter-multi-dropdown {
    .p-multiselect {
      box-shadow: none !important;
      border: 1px solid var(--gray-300) !important;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      height: 44px;
      box-shadow: none !important;
      width: 200px !important;

      &:focus {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
      }
      .p-inputwrapper-filled {
        background: #ffffff !important;
      }
    }
  }

  .filter-calendar {
    .p-inputtext {
      border: 1px solid var(--gray-300) !important;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      height: 44px;
      line-height: 44px;
      box-shadow: none !important;

      &:focus {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
      }
    }
  }

  .data_table_multi_checkbox {
    .p-checkbox {
      vertical-align: baseline;
    }
  }
}
.p-multiselect-header {
  .p-checkbox {
    display: none !important;
  }
}
.overlay_list_options {
  .p-overlaypanel-content {
    padding: 0;
  }
}

.filter-btn-grid {
  padding: 10px;
}

// modal with filter
.modal_filter {
  width: 840px;
  overflow-x: auto;
  @media (max-width: 760px) {
    width: 100%;
  }
  @media (max-width: 1024px) {
    width: 840px;
  }

  .p-dialog-header {
    display: none;
  }
  .p-dialog-content {
    padding: 0px;
    border-radius: 6px;
    overflow-x: auto;
  }
}

// .table-filter-overlay {
//   width: 51rem !important;
//   &:after,
//   &:before {
//     margin-left: -12px !important;
//   }

//   margin-left: -10px;

//   .p-overlaypanel-content {
//     padding: 0;
//   }
// }
.filter_dropdown_and {
  .p-dropdown-trigger {
    margin-top: 2px !important;
  }
}

.icon-24x24 {
  width: 24px;
  height: 24px;
}

.icon-32x32 {
  width: 32px;
  height: 32px;
}

.h-38 {
  height: 38px;
}

.border-round-6 {
  border-radius: 6px !important;
}

// loader styles
.loader-wrapper {
  width: 60px;
  height: 60px;
  top: 45%;
  left: 45%;
  transform: translate(-45%, -50%);
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  transform: rotate(45deg);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  /* HTML: <div class="loader"></div> */
  .loader-jobs {
    width: 35px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(farthest-side, var(--primary-500) 94%, #0000) top/5px 5px
        no-repeat,
      conic-gradient(#0000 5%, var(--primary-500));
    -webkit-mask: radial-gradient(
      farthest-side,
      #0000 calc(100% - 5px),
      #000 0
    );
    animation: l13 1s infinite linear;
  }

  @keyframes l13 {
    100% {
      transform: rotate(1turn);
    }
  }

  @keyframes gradient {
    0% {
      background-position: 100% 50%;
    }

    50% {
      background-position: 50% 70%;
    }

    100% {
      background-position: 70% 100%;
    }
  }
}

.loader-main {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
  &:nth-child(2) {
    width: 90%;
  }
  &:nth-child(3) {
    width: 80%;
  }
  &:nth-child(4) {
    width: 70%;
  }
}

.loader-main::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 3px solid var(--primary-500);
  animation: prixClipFix 2s linear infinite;
}

.br-6 {
  border-radius: var(--border-radius);
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.pd-9 {
  padding: 9px;
}

.custom_grid_checkbox {
  &.custom_grid_indeterminate {
    .p-checkbox-box {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      background: url("./assets/png/checkbox_minus_icon.png");
      transition: background 0.3s;
      border: 0;

      &.p-highlight {
        background: url("./assets/png/checkbox_minus_icon.png");

        &:hover {
          background: url("./assets/png/checkbox_minus_icon.png") transparent !important;
        }

        svg {
          width: 0 !important;
          height: 0 !important;
        }
      }
    }
  }
  position: relative;
  margin-right: 5px;

  .p-checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: url("./assets/png/checkbox_outline_icon.png");
    transition: background 0.3s;
    border: 0;

    &:hover {
      background: url("./assets/png/checkbox_outline_icon.png") transparent !important;
      border: 0 !important;
    }

    &.p-highlight {
      background: url("./assets/png/checkbox_fill_icon.png");

      &:hover {
        background: url("./assets/png/checkbox_fill_icon.png") transparent !important;
      }

      svg {
        width: 0 !important;
        height: 0 !important;
      }
    }
  }
}

// .ag-grid-container {
//   .ag-cell-wrapper {
//     width: 100% !important;
//     .ag-group-value {
//       width: 100% !important;
//     }
//   }
// }

// .ag_grid_sidebar {
//   .p-sidebar-content {
//     padding-right: 16px;
//   }
// }

.ag-center-cols-viewport {
  min-height: 0px !important;
}

// .filter-dropdown-grid {
//   .p-placeholder {
//     margin-top: 3px;
//   }
// }

.zoom_animate {
  transition: all 0.4s ease-in-out;
  animation: zoomin 0.2s linear;
}

@keyframes zoomin {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
  }
}

// .slide_animate_sort {
//   overflow: hidden; /* Ensures content is not visible outside of the height */
//   height: 0; /* Start with height 0 */
//   opacity: 0; /* Start with full transparency */
//   animation: slide_down 0.5s ease-in-out forwards; /* Run the animation on load */
// }

// @keyframes slide_down {
//   0% {
//     height: 0;
//     // margin-top: -30px; /* Start 30px above the final position */
//     opacity: 0; /* Fully transparent */
//   }
//   100% {
//     height: 90px; /* The final height */
//     // margin-top: 0px; /* Move to the final position */
//     opacity: 1; /* Fully opaque */
//   }
// }

.pd-r-2 {
  padding-right: 2px;
}

.ag-grid-container:has(.custom_class_name) {
  .ag-cell-wrapper {
    width: 100% !important;
    .ag-group-value {
      width: 100% !important;
    }
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.edited-record {
  background-color: var(--primary-50);
}
.non-editable {
  background-color: var(--gray-100);
}

.tagify {
  height: 200px;
  .tagify__input {
    color: #000;
    overflow: auto;
    tag[type="math"] {
      * {
        padding: 0 !important;
        &::before {
          box-shadow: none !important;
        }
      }

      x {
        display: none !important;
      }
    }
  }
}

.text_ellipsis {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

.line_clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  &.line_clamp_1 {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  &.line_clamp_2 {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

// .text_ellipsis {
//   display: -webkit-box !important;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 1;
//   line-clamp: 1;
//   white-space: normal;
//   overflow: hidden;
// }

// button styles
// .p-button.sc_btn,
// div.sc_btn {
//   font-weight: 600;
//   border-radius: var(--border-radius);
//   display: flex;
//   align-items: center;
//   padding: 8px 16px;
//   cursor: pointer;
//   font-size: 14px;
//   padding: 8px 16px;

//   &:has(svg) {
//     display: flex;
//     align-items: center;
//     gap: 6px;
//   }
//   svg {
//     width: 18px;
//     height: 18px;
//     path {
//       stroke: #fff;
//     }
//   }
//   &.primary {
//     background-color: var(--primary-500);
//     color: #fff;
//     &:hover {
//       background-color: var(--primary-700);
//     }
//   }
//   &.destructive {
//     background-color: var(--red-600);
//     color: #fff;
//     &:hover {
//       background-color: var(--red-700);
//     }
//   }

//   &.secondary {
//     background-color: var(--bg-white);
//     padding-block: 7px !important;
//     // outline-offset: -1px;
//     color: var(--gray-700);
//     border: 1px solid var(--gray-300) !important;
//     &:hover {
//       background-color: var(--gray-50);
//       color: var(--gray-900);
//     }
//   }

//   // Teritiary buttons
//   &.tertiary {
//     background-color: transparent;
//     &.primary_text {
//       color: var(--primary-500);
//       &:hover {
//         background-color: var(--primary-25);
//         color: var(--primary-700);
//         svg {
//           path {
//             stroke: var(--primary-700);
//           }
//         }
//       }
//       svg {
//         path {
//           stroke: var(--primary-600);
//         }
//       }
//     }
//     &.destructive_text {
//       color: var(--red-600);
//       &:hover {
//         background-color: var(--red-50);
//         color: var(--red-700);
//         svg {
//           path {
//             stroke: var(--red-700);
//           }
//         }
//       }
//       svg {
//         path {
//           stroke: var(--red-600);
//         }
//       }
//     }
//     &.secondary_text {
//       color: var(--gray-600);
//       &:hover {
//         background-color: var(--gray-50);
//         color: var(--gray-700);
//         svg {
//           path {
//             stroke: var(--gray-700);
//           }
//         }
//       }
//       svg {
//         path {
//           stroke: var(--gray-600);
//         }
//       }
//     }
//   }
//   &.icon_right {
//     padding: 8px 12px 8px 16px;
//   }
//   &.icon_left {
//     padding: 8px 16px 8px 12px;
//   }
//   &.icon_both {
//     padding: 8px 12px;
//   }
//   &.icon_btn {
//     padding: 8px 12px;
//     border-radius: var(--border-radius);
//     background-color: transparent;
//     border: 0 !important;

//     &.primary {
//       svg {
//         path {
//           stroke: var(--primary-500);
//         }
//       }
//       &:hover {
//         background-color: var(--primary-25);
//         svg {
//           path {
//             stroke: var(--primary-700);
//           }
//         }
//       }
//     }
//     &.secondary {
//       svg {
//         path {
//           stroke: var(--gray-600);
//         }
//       }
//       &:hover {
//         background-color: var(--gray-50);
//         svg {
//           path {
//             stroke: var(--gray-700);
//           }
//         }
//       }
//     }
//   }
// }

.max-height {
  height: 340px;
}