:root {
      --litepicker-day-width: 47px;
      --litepicker-month-width: calc(var(--litepicker-day-width) * 7);
  }

  /*  */
  [x-cloak] {
      display: none;
  }

  .tooltip {
      position: relative;

      &::before {
          content: attr(title);
          color: white;
          display: inline-block;
          position: absolute;
          background-color: #6C7F95;
          border-radius: 4px;
          white-space: nowrap;
          padding: 6px 8px;
          font-weight: 600;
          font-size: 12px;
          line-height: 20px;
          text-transform: capitalize;
          visibility: collapse;
          opacity: 0;
          transition: all 500ms ease-in-out;
      }

      &.tooltip-left::before {
          left: 6px;
          right: auto;
          transform: translateX(-100%);
      }

      &.tooltip-bottom::before {
          top: 45px;
          left: 20px;
      }

      &:hover::before {
          visibility: visible;
          opacity: 1;
      }
  }

  .zoom-in {
      will-change: transform;
      transition-property: transform, box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;

      &:hover {
          transform: scale(1.05);
      }
  }

  .arrow {
      background-image: var(--my-bg);
  }



  *:not(html) {
      scrollbar-width: thin;
      scrollbar-color: #a0aec0 #f1f5f9;
  }


  /* Webkit browsers (Chrome, Edge, Safari) */
  *:not(html) {
      &::-webkit-scrollbar {
          width: 2px;
          height: 2px;
      }

      &::-webkit-scrollbar-track {
          background: #f1f5f9;
          border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
          background-color: #191919;
      }
  }

  /* Firefox */



  /* ============================================================
   Tom Select – Custom Styles
   ------------------------------------------------------------
   Place all global Tom Select overrides here. 
   For component-specific adjustments, add styles in this section as well.
============================================================ */
  .ts-control,
  .ts-control input,
  .ts-dropdown {
      color: inherit;
      font-size: inherit;
      line-height: inherit;
  }

  .ts-wrapper.single .ts-control {
      background-color: unset;
      background-image: unset;
      box-shadow: none;
      background-repeat: unset;

  }

  .ts-dropdown.single,
  .ts-wrapper.single .ts-control {
      border-color: var(--color-neutralBorder-03);
  }

  .ts-wrapper.single .ts-control::after {
      border: none !important;
      content: " ";
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 16px !important;
      height: 16px !important;
      background: url("../images/angle-down-small-h6Tkp3t.svg");
      background-repeat: no-repeat;
      background-position: center center;
  }

  .ts-wrapper.single .ts-control:not(.rtl)::after {
      right: 12px;
  }

  .ts-wrapper.single .ts-control.rtl::after {
      left: 12px;
  }

  .ts-control {
      padding: 10px 12px;
  }

  .view-tom-select {
      position: relative;
  }


    .ts-control {
      background-color: #fff !important;
      background-image: none !important;
      box-shadow: none !important;
      border: 1px solid #DEE6ED !important;
      border-radius: 4px !important;
      padding-block: 6px;
      padding-inline: 16px;
      align-items: center;
  }

  .dropdown-input-wrap input,
    .ts-control:focus-visible {
      outline: none !important;
      /* border */
  }

    .ts-dropdown {
      border-color: #DEE6ED !important;
  }


  .view-tom-select .ts-wrapper {
      position: static !important;
      min-height: 25px !important;
  }

  .view-tom-select .ts-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
  }

  .view-tom-select .ts-control {
      background: #DDEBFB !important;
      border-radius: 130px !important;
      padding: 0 !important;
      padding-right: 0 !important;
      text-align: center !important;
      width: 70px !important;
      justify-content: center !important;
      align-items: center !important;
      position: static !important;
  }

  .view-tom-select .ts-control::before {
      content: "";
      position: absolute;
      inset: 0;
  }

  .filter-tom-select .tom-select {
      padding: 0 4px !important;
      width: 100% !important;
      outline: none !important;
  }

  .view-tom-select select,
  select {
      background-size: 16px;
  }

  .view-tom-select select {
      padding: 0 24px 0 3px !important;
      outline: 0 !important;
  }



  /* ============================================================
  Ends/ Tom Select – Custom Styles
============================================================ */

  /* ============================================================
  start/ base css – Custom Styles
============================================================ */
  .page-content-wrapper {
      height: calc(100vh - 65px);
      padding-bottom: 8px;
  }

  .date-input {
      background-image: url("../images/calendar-HCqSYvi.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .date-outline-input {
      background-image: url("../images/outline-calendar-icon-d-YbBHQ.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .time-input {
      background-image: url("../images/clock-icon-1ugP3oq.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .location-input {
      background-image: url("../images/location-icon-3DMAcVu.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .file-input {
      background-image: url("../images/file-upload-icon-pM1tw_q.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .search-input {
      background-image: url("../images/search-blue-icon-mFog1-_.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .search-input-left {
      background-image: url("../images/search-blue-icon-mFog1-_.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: left 10px center;
  }

  .ms-options-wrap>.ms-options>ul label {
      padding: 4px 4px 4px 26px !important;
  }

  .ms-options-wrap>.ms-options>ul input[type="checkbox"] {
      top: 5px !important;
  }

  .ms-options-wrap>button:after {
      content: "" !important;
      background-image: url("../images/angle-down-small-h6Tkp3t.svg") !important;
      background-repeat: no-repeat !important;
      width: 16px !important;
      height: 16px !important;
      display: inline-block;
      z-index: 999999;
      border: none !important;
  }

  .ms-options-wrap.ms-active>.ms-options {
      min-height: 150px !important;
  }

  .rules-container>div {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .rules-container>div>div:nth-child(2),
  .rules-container>div>div:last-child {
      width: 100px;
  }

  .custom-calendar .toastui-calendar-layout {
      border: 1px solid #F2F4F7;
  }

  .custom-calendar .toastui-calendar-day-names {
      background-color: #F9FAFB !important;
      padding: 0 0 !important;
  }

  .custom-calendar .toastui-calendar-day-names .toastui-calendar-day-name-container .toastui-calendar-day-name-item {
      border-right: 1px solid #EEF2F6 !important;
  }

  .custom-calendar .toastui-calendar-template-time,
  .custom-calendar .toastui-calendar-template-time strong {
      color: #6C7F95 !important;
      font-size: 12px !important;
      font-weight: 400 !important;
  }

  .custom-calendar .toastui-calendar-popup-container {
      box-shadow: none !important;
  }

  .cut-circle {
      background-color: var(--color);
      transform-style: preserve-3d;
  }

  .cut-circle:not(:first-child)::before {
      content: "";
      height: calc(100% + 2px);
      width: calc(100% + 2px);
      background-color: white;
      position: absolute;
      left: -4px;
      border-radius: 100%;
      top: 50%;
      transform: translateY(-50%) translateZ(-1px);
  }

  .time-picker-input select {
      border-radius: 4px !important;
  }

  .shadow-soft-lg {
      box-shadow:
          0px 10px 24px -2px #132D590F,
          0px 6px 7px -3px #132D5914;
  }

  /* toggle button extra design */
  .toggle-button p label {
      margin-bottom: 0 !important;
      cursor: pointer;
  }

  .user-search-form-control .ts-control {
      background: white !important;
      padding: 10px 12px !important;
      box-shadow: none !important;
      color: #475F7B !important;
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-wrapper.single {
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-dropdown {
      box-shadow: none !important;
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-dropdown .ts-dropdown-content {
      font-size: 13px !important;
      color: #475F7B !important;
  }

  .user-search-form-control .ts-control input,
  .user-search-form-control .ts-control .clear-button {
      display: none !important;
  }

  .ts-wrapper.single .ts-control:not(.rtl):after {
      margin: 0 !important;
  }

  /* loader css */
  .loader {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: block;
      margin: 15px auto;
      position: relative;
      color: #2E66B9;
      box-sizing: border-box;
      background: transparent;
      animation: animloader 1s linear infinite alternate;
  }

  @keyframes animloader {
      0% {
          box-shadow: -38px -6px, -14px 6px, 14px -6px;
      }

      33% {
          box-shadow: -38px 6px, -14px -6px, 14px 6px;
      }

      66% {
          box-shadow: -38px -6px, -14px 6px, 14px -6px;
      }

      100% {
          box-shadow: -38px 6px, -14px -6px, 14px 6px;
      }
  }

  /* glightbox content css */
  .gdesc-inner {
      padding: 12px 20px !important;
  }

  .gdesc-inner .gslide-title {
      margin-bottom: 0 !important;
  }

  table tbody tr:nth-last-child(-n+3) .dropdown-menu {
      bottom: 100%;
      transform: translateY(-100%);
      padding-top: 0;
      padding-bottom: 4px;
  }

  table tbody tr:nth-child(-n+3) .dropdown-menu {
      bottom: 0;
      transform: translateY(0);
      padding-top: 4px;
      padding-bottom: 0;
  }

  /* Default: open downward */
  .accordion-item .search-dropdown-menu {
      bottom: 0;
      transform: translateY(0);
      padding-top: 4px;
      padding-bottom: 0;
  }

  /* When there are 1 or 2 items → always open downward */
  .accordion-item:nth-child(-n+2):nth-last-child(-n+2) .search-dropdown-menu {
      bottom: 0 !important;
      transform: translateY(0) !important;
      padding-top: 4px !important;
      padding-bottom: 0 !important;
  }

  /* When there are exactly 3 items → all open upward */
  .accordion-item:nth-child(-n+3):nth-last-child(-n+3):not(:nth-child(-n+2):nth-last-child(-n+2)) .search-dropdown-menu {
      bottom: 100% !important;
      transform: translateY(-100%) !important;
      padding-top: 0 !important;
      padding-bottom: 4px !important;
  }

  /* 🩵 FIX: specifically for the 3-item case to ensure ALL 3 go upward */
  .accordion-item:nth-child(2):nth-last-child(2):nth-child(-n+3):nth-last-child(-n+3) .search-dropdown-menu {
      bottom: 100% !important;
      transform: translateY(-100%) !important;
      padding-top: 0 !important;
      padding-bottom: 4px !important;
  }

  /* When there are more than 3 items → last 3 open upward */
  .accordion-item:nth-last-child(-n+3):not(:nth-child(-n+3):nth-last-child(-n+3)) .search-dropdown-menu {
      bottom: 100%;
      transform: translateY(-100%);
      padding-top: 0;
      padding-bottom: 4px;
  }

  /* Remove default date icon */
  .date-input-default-icon::-webkit-calendar-picker-indicator {
      display: none !important;
      -webkit-appearance: none;
      appearance: none;
  }

  /* Remove spin buttons (Chrome, Edge) */
  .date-input-default-icon::-webkit-inner-spin-button {
      display: none;
  }

  /* Remove clear button (Edge) */
  .date-input-default-icon::-ms-clear {
      display: none;
  }

  .tomselect-edit-option .ts-control {
      background-color: #fff !important;
      background-image: none !important;
      box-shadow: none !important;
      border: 1px solid #DEE6ED !important;
      border-radius: 4px !important;
      padding-block: 6px;
      padding-inline: 16px;
      align-items: center;
  }

  .tomselect-edit-option .dropdown-input-wrap input,
  .tomselect-edit-option .ts-control:focus-visible {
      outline: none !important;
      /* border */
  }

  .tomselect-edit-option .ts-dropdown {
      border-color: #DEE6ED !important;
  }

  table.contact-list tbody tr:only-child .tomselect-position .ts-dropdown {
      top: 100%;
      bottom: auto;
  }

  table.contact-list tbody tr:nth-child(odd):nth-last-child(-n+6) .tomselect-position .ts-dropdown {
      margin-top: 0;
      top: auto;
      bottom: 100%;
      margin-bottom: 4px;
  }

  table.contact-list tbody:has(> tr:nth-of-type(2)):not(:has(> tr:nth-of-type(3))) tr:nth-child(odd) .tomselect-position .ts-dropdown {
      top: 100%;
      bottom: auto;
      margin-bottom: 0;
      margin-top: 4px;
  }

  table.contact-list tbody tr:nth-child(odd) td:nth-child(2),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(2),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(3),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(3),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(4),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(4),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(5),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(5),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(6),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(6) {
      min-width: 200px;
  }

  table.contact-list tbody tr:nth-child(odd) td:nth-child(7),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(7) {
      min-width: 200px;
  }

  table.contact-list tbody tr .tomselect-position .ts-dropdown .ts-dropdown-content {
      max-height: 120px;
  }

  table.contact-list tbody tr:nth-child(even):nth-last-child(-n+6) .tomselect-position .ts-dropdown {
      margin-top: 0;
      top: auto;
      bottom: 100%;
      margin-bottom: 4px;
  }

  /* ============================================================
    Ends/ base css – Custom Styles
============================================================ */




  /* ============================================================
  start lightpicker styles ( default css overrides and base css)
============================================================ */

  .litepicker {
      --litepicker-button-next-month-color: #2E66B9;
      --litepicker-button-next-month-color-hover: #2E66B9;
      --litepicker-button-prev-month-color: #2E66B9;
      --litepicker-button-prev-month-color-hover: #2E66B9;
      --litepicker-day-color: #6C7F95;
      --litepicker-month-header-color: #6C7F95;
      --litepicker-month-weekday-color: #D1D5DB;
      --litepicker-is-end-color-bg: #2E66B9;
      --litepicker-day-color-hover: #2E66B9;
      --litepicker-day-width: 44px;

      font-family: 'Inter';
      font-weight: 400;
      font-size: 13px;
      line-height: 20px;

  }

  .litepicker .container__months {
      box-shadow: 0px 10px 24px -2px #132D590F,
          0px 6px 7px -3px #132D5914;
  }

  .litepicker .container__days {
      width: calc(var(--litepicker-day-width) * 7);
  }

  .litepicker .container__months .month-item-header .button-previous-month,
  .litepicker .container__months .month-item-header .button-next-month {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #DEE6ED;
      position: relative;
      overflow: hidden;

      &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 20px;
      }

      &.button-next-month::before {
          transform: rotate(270deg);
      }

      &.button-previous-month::before {
          transform: rotate(90deg);
      }

      &:hover {
          background-color: #EEF2F6;

      }
  }

  .litepicker .container__months .month-item-header :is(.button-next-month, .button-previous-month)> :is(svg, img) {
      display: none;
  }

  .litepicker .container__months .month-item-header div>.month-item-name {
      font-weight: 500;
  }

  .litepicker .container__months .month-item-weekdays-row>div {
      padding: 12px 0px;
      /* height: 44px;
      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center; */
  }

  .litepicker .container__days>div,
  .litepicker .container__days>a {
      padding: 12px 0px;
      /* height: 44px;
      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      background-clip: content-box; */
  }

  /* ============================================================
  ends lightpicker styles ( default css overrides and base css)
============================================================ */


  .dropdown {
      position: absolute;
      /* or 'fixed' to match strategy */
      top: 0;
      left: 0;
      width: max-content;
      z-index: 1000;
  }

  .arrow {
      position: absolute;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
  }

  .flatpickr-calendar {
      width: 200px !important;
  }

  .holiday-highlight {
    background-color: #2C6DE9 !important;
    color: white !important;
/*     border-radius: 50%; */
  }