.truncate-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      display: block;
    }

    .truncate-text-multiple {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      line-height: 1.5;
      max-height: 3.1em;
    }

    .image-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.9);
    }

    .image-modal .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }

    .image-modal .caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }

    .image-modal .modal-content,
    .image-modal .caption {
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }

    .page-content {
      min-height: 90vh;
    }

    .image-modal .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
      z-index: 10;
    }

    .image-modal .close:hover,
    .image-modal .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }

    @-webkit-keyframes zoom {
      from {
        -webkit-transform: scale(0)
      }

      to {
        -webkit-transform: scale(1)
      }
    }

    @keyframes zoom {
      from {
        transform: scale(0)
      }

      to {
        transform: scale(1)
      }
    }

    @media only screen and (max-width: 700px) {
      .image-modal .modal-content {
        width: 100%;
      }
    }

    .select2-container {
      height: auto !important;
      display: block !important;
    }

    .select2-container .select2-selection {
      height: auto !important;
    }

    .select2-container .select2-selection__arrow {
      height: 100% !important;
      margin-right: 6px;
    }

    .border-dashed {
      border-style: dashed !important;
    }

    input[type=number][step="0.01"]::-webkit-outer-spin-button,
    input[type=number][step="0.01"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number][step="0.01"] {
      -moz-appearance: textfield;
    }

    .remaining_text {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 12px;
      border: solid 1px #f5f5f5;
      background: white;
      padding: 4px;
      border-radius: 4px;
    }


    .ic_10,
    .ic_12,
    .ic_14,
    .ic_16,
    .ic_18,
    .ic_20,
    .ic_22,
    .ic_24,
    .ic_26,
    .ic_28,
    .ic_30,
    .ic_32,
    .ic_34,
    .ic_36,
    .ic_38,
    .ic_40,
    .ic_42,
    .ic_44,
    .ic_46,
    .ic_48 {
      display: inline-block;
    }

    .ic_10 {
      height: 10px !important;
      width: 10px !important;
    }

    .ic_12 {
      height: 12px !important;
      width: 12px !important;
    }

    .ic_14 {
      height: 14px !important;
      width: 14px !important;
    }

    .ic_16 {
      height: 16px !important;
      width: 16px !important;
    }

    .ic_18 {
      height: 18px !important;
      width: 18px !important;
    }

    .ic_20 {
      height: 20px !important;
      width: 20px !important;
    }

    .ic_22 {
      height: 22px !important;
      width: 22px !important;
    }

    .ic_24 {
      height: 24px !important;
      width: 24px !important;
    }

    .ic_26 {
      height: 26px !important;
      width: 26px !important;
    }

    .ic_28 {
      height: 28px !important;
      width: 28px !important;
    }

    .ic_30 {
      height: 30px !important;
      width: 30px !important;
    }

    .ic_32 {
      height: 32px !important;
      width: 32px !important;
    }

    .ic_34 {
      height: 34px !important;
      width: 34px !important;
    }

    .ic_36 {
      height: 36px !important;
      width: 36px !important;
    }

    .ic_38 {
      height: 38px !important;
      width: 38px !important;
    }

    .ic_40 {
      height: 40px !important;
      width: 40px !important;
    }

    .ic_42 {
      height: 42px !important;
      width: 42px !important;
    }

    .ic_44 {
      height: 44px !important;
      width: 44px !important;
    }

    .ic_46 {
      height: 46px !important;
      width: 46px !important;
    }

    .ic_48 {
      height: 48px !important;
      width: 48px !important;
    }

    .selective_icons {
      padding: 4px;
      margin: 4px;
      cursor: pointer;
      border: solid 1px transparent;
    }

    .selective_icons img {
      width: 30px;
      height: 30px;
    }

    .selective_icons input {
      display: none;
    }

    .selective_icons.active {
      border: solid 1px #000;
    }

    .chosen-container-multi .chosen-choices {
      --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212a3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
      display: block;
      width: 100%;
      padding: .300rem .8rem !important;
      font-family: var(--maxmites-font-sans-serif) !important;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.49;
      padding-left: 1rem;
      color: var(--bs-body-color) !important;
      appearance: none !important;
      background-color: var(--bs-body-bg) !important;
      background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
      background-repeat: no-repeat !important;
      background-position: right .8rem center !important;
      background-size: 16px 12px !important;
      border: var(--maxmites-border-width) solid var(--maxmites-border-color);
      border-radius: .25rem !important;
      box-shadow: var(--bs-box-shadow-inset) !important;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    }

    .main_filter_input {
      max-width: 150px
    }

    .exist_image {
      position: relative;
    }

    .exist_image .remove {
      width: 38px;
      height: 38px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: red;
      color: white;
      display: none;
      cursor: pointer;
      border-radius: 4px;
    }

    .exist_image:hover .remove {
      display: block;
    }

    .ui-autocomplete {
      z-index: 2050;
      background-color: white;
      border: solid 1px #ddd;
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .ui-menu-item {
      cursor: pointer;
      border-bottom: solid 1px #ddd;
    }

    .ui-menu-item .ui-state-active,
    .ui-autocomplete .ui-state-active,
    .ui-menu-item:hover div,
    .ui-menu-item:focus div {
      background-color: #3874ff;
      color: var(--bs-primary);

      color: #fff;
    }

    .ui-state-highlight {
      display: inline-block !important;
      visibility: hidden;
      background: #f8f9fa;
      border: 1px dashed #ccc;
      width: 100px;
      height: 40px;
      vertical-align: middle;
    }


    .select2-container--default .select2-selection--single .select2-selection__rendered {
      padding: 4px 8px !important;
      padding-right: 32px !important;
    }

    .select2-container--default .select2-selection--single {
      border: var(--maxmites-border-width) solid var(--maxmites-border-color) !important;
      font-family: var(--maxmites-font-sans-serif) !important;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.49;
      padding-left: 1rem;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background: var(--maxmites-primary);
    }

    #progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background-color: #fc641c;
      z-index: 9999;
      /* transition: width 0.4s ease; */
    }

    .font10 {
      font-size: 10px !important;
    }

    .font11 {
      font-size: 11px !important;
    }

    .font12 {
      font-size: 12px !important;
    }

    .font13 {
      font-size: 13px !important;
      line-height: 1.2 !important;
    }

    .font14 {
      font-size: 14px !important;
      line-height: 1.2 !important;
    }

    .font16 {
      font-size: 16px !important;
    }

    .font17 {
      font-size: 17px !important;
    }

    .font18 {
      font-size: 18px !important;
    }

    .font19 {
      font-size: 19px !important;
    }

    .font20 {
      font-size: 20px !important;
    }

    .table thead th {
      font-size: 12px !important;
      font-weight: 600 !important;
    }

    b,
    strong {
      font-weight: 600 !important;
    }

    .table .td-1 {
      width: 140px !important;
    }

    .table .td-2 {
      width: 180px !important;
    }

    .table .td-3 {
      width: 250px !important;
    }

    .table .td-4 {
      width: 300px !important;
    }

    .table .td-img {
      width: 64px !important;
    }

    .table .td-img img {
      border-radius: 100%;
    }

    .table .td-btn {
      width: 185px !important;
    }

    .table .td-btn-sm {
      width: 120px !important;
      text-align: center;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      /* 7 equal columns */
      gap: 1px;
    }

    .calendar-grid>div {
      border: 1px solid #dee2e6;
      height: 100px;
      padding: 5px;
      background-color: #f8f9fa;
    }

    .calendar-grid>div.hover {
      cursor: pointer;
    }

    .calendar-grid>div.hover:hover {
      opacity: 0.8;
    }

    .weekday-header {
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
      border: 1px solid #eee !important;
      height: auto !important;
      background-color: #eee !important;
    }

    .rotate {
      transition: transform 0.3s ease;
    }

    .rotate_down {
      transform: rotate(180deg);
    }

    .select2-container--open .select2-dropdown,
    select option {
      font-size: 12px !important;
    }


    .lead-workstages .item {
      flex-grow: 1;
      background-color: #e6e6e6;
      height: 24px;
      position: relative;
      background: #e6e6e6;
      float: left;
      display: inline;
      margin-right: 5px;
      width: 15%;
      cursor: pointer;
      font-size: 12px;
      padding-left: 12px;
      color: #444;
      padding-top: 2px;
    }

    .lead-workstages .active {
      background-color: #111111;
      color: #fff
    }

    .lead-workstages .item i {
      font-size: 10px;
      color: #ccc
    }

    .lead-workstages .item::before {
      content: "";
      position: absolute;
      right: -5px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 5px solid #e6e6e6;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      z-index: 111
    }

    .lead-workstages .active::before {
      border-left-color: #111111;
    }

    .lead-workstages .item::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 5px solid #fff;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }

    #popupForm .bg {
      position: fixed;
      z-index: 99999;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #0000003b;
    }

    .popup-form {
      position: fixed;
      width: 250px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
      z-index: 100000;
    }

    .popup-form .arrow {
      position: absolute;
      width: 12px;
      height: 12px;
      background: white;
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      transform: rotate(45deg);
      top: -6px;
      left: 20px;
    }

    #popupForm,
    #popupForm * {
      user-select: auto !important;
      pointer-events: auto !important;
    }

    .lead_secure_emoji {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .lead_secure_emoji .emo {
      width: 36px;
      height: 36px;
      display: block;
      cursor: pointer;
      filter: grayscale(100%);
      transition: filter 0.3s ease, transform 0.3s ease;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .lead_secure_emoji .emo.zoom,
    .lead_secure_emoji .emo.active {
      filter: grayscale(0%);
      transform: scale(1.2);
    }

    .lead_secure_emoji .emoji1 {
      background-image: url('../../assets/icons/emoji/emoji1.svg');
    }

    .lead_secure_emoji .emoji2 {
      background-image: url('../../assets/icons/emoji/emoji2.svg');
    }

    .lead_secure_emoji .emoji3 {
      background-image: url('../../assets/icons/emoji/emoji3.svg');
    }

    .lead_secure_emoji .emoji4 {
      background-image: url('../../assets/icons/emoji/emoji4.svg');
    }

    .lead_secure_emoji .emoji5 {
      background-image: url('../../assets/icons/emoji/emoji5.svg');
    }

 

    .single_selective_radio {
      width: 32px;
      height: 32px;
      cursor: pointer;
      border: solid 1px #ddd;
      margin: 0.5rem;
    }

    .single_selective_radio input {
      display: none;
    }

    .single_selective_radio.active {
      outline: solid 5px #ccc;
      border-color: #ccc;
    }

    .chosen-container-multi .chosen-choices {
      background-color: white !important;
    }
    .table th.sort{cursor: pointer;}
    .table th.sort .filter_icon{
      margin-left:8px;
    }

    /* ============================================================
       MOBILE RESPONSIVENESS & SLIDE-UP FILTER DRAWER
       ============================================================ */

    .mobile-filter-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 99990;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-filter-backdrop.show {
      opacity: 1;
      visibility: visible;
    }

    .mobile-filter-drawer {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      background: #ffffff !important;
      border-top-left-radius: 20px !important;
      border-top-right-radius: 20px !important;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
      z-index: 99999 !important;
      transform: translateY(100%) !important;
      transition: transform 0.35s cubic-bezier(0.32, 1, 0.23, 1) !important;
      padding: 0.75rem 1.25rem 2rem !important;
      max-height: 85vh !important;
      display: flex !important;
      flex-direction: column !important;
      box-sizing: border-box !important;
      margin: 0 !important;
    }

    .mobile-filter-drawer.show {
      transform: translateY(0) !important;
    }

    .mobile-filter-drawer-handle {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 4px 0 10px !important;
      width: 100% !important;
    }

    .mobile-filter-drag-pill {
      display: inline-block !important;
      width: 44px !important;
      height: 5px !important;
      background: #cbd5e1 !important;
      border-radius: 4px !important;
    }

    .mobile-filter-drawer-header {
      padding-bottom: 0.85rem !important;
      margin-bottom: 1.25rem !important;
      border-bottom: 1px solid #f1f5f9 !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
    }

    .mobile-filter-drawer-title {
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      display: flex !important;
      align-items: center !important;
    }

    .mobile-filter-drawer-body {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0.85rem !important;
      width: 100% !important;
    }

    .mobile-filter-drawer-body select,
    .mobile-filter-drawer-body .form-select,
    .mobile-filter-drawer-body input,
    .mobile-filter-drawer-body .form-control {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      min-height: 48px !important;
      height: 48px !important;
      font-size: 15px !important;
      border-radius: 10px !important;
      padding: 0.65rem 1rem !important;
      margin: 0 !important;
      border: 1.5px solid #e2e8f0 !important;
      background-color: #f8fafc !important;
      color: #1e293b !important;
      box-sizing: border-box !important;
      flex: 1 1 100% !important;
    }

    .mobile-filter-drawer-body select:focus,
    .mobile-filter-drawer-body .form-select:focus,
    .mobile-filter-drawer-body input:focus,
    .mobile-filter-drawer-body .form-control:focus {
      border-color: #3874ff !important;
      background-color: #ffffff !important;
      box-shadow: 0 0 0 3px rgba(56, 116, 255, 0.15) !important;
    }

    .page-actions-toolbar {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
    }

    .page-actions-toolbar .btn,
    .page-actions-toolbar .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 10px;
      font-size: 13px;
      border-radius: 6px;
    }

    @media (max-width: 767.98px) {
      /* Hide inline page filter group in header on mobile */
      .page-filter-group {
        display: none !important;
      }

      body.mobile-filter-open {
        overflow: hidden !important;
      }

      /* Responsive Page Header & 1-Row Button Alignment (Title - Filter - Add - Export) */
      .grid-margin {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
      }

      .grid-margin h3,
      .grid-margin h4 {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .grid-margin > .row {
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
      }

      .grid-margin > .row > .col,
      .grid-margin > .row > .col-auto {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
      }

      .page-actions-toolbar,
      .grid-margin .page-actions-toolbar,
      .grid-margin .col-auto .d-flex,
      .grid-margin .d-flex.align-items-center {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        flex-wrap: nowrap !important;
        width: auto !important;
      }

      .page-actions-toolbar .btn,
      .page-actions-toolbar .dropdown-toggle,
      .grid-margin .btn {
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .mobile-filter-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      /* Responsive Tables */
      .table-responsive {
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
      }

      /* Full Screen Offcanvas & Responsive Modals on Mobile */
      .offcanvas {
        width: 100% !important;
        max-width: 100% !important;
      }

      .task-meta-sidebar {
        border-left: none !important;
        border-top: solid 1px rgba(0, 0, 0, 0.12) !important;
      }

      .lead-nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (min-width: 768px) {
      .mobile-filter-backdrop,
      .mobile-filter-drawer,
      .mobile-filter-toggle-btn {
        display: none !important;
      }
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice{
      font-size: 12px !important;
    }