:root {
      /* Sole definition of the picker's scale — month width is derived, so the
         two can never drift apart. It previously WAS defined twice: 47px here
         and 44px on .litepicker below, which left the month container 21px
         wider than the grid of days inside it. Row height is set by the day
         cell padding further down; change both together. */
      --litepicker-day-width: 37px;
      --litepicker-month-width: calc(var(--litepicker-day-width) * 7);
  }

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

  .scrollbar-hidden {
      scrollbar-width: none;
      -ms-overflow-style: none;
  }

  .scrollbar-hidden::-webkit-scrollbar {
      display: none;
  }

  /* List-view grid-line modes (All / Rows / None toggle) */
  .list-table tbody tr {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .list-table tbody tr:last-child {
      border-bottom: none;
  }

  .list-table.gl-none tbody tr {
      border-bottom: none;
  }

  .list-table.gl-all thead th:not(:last-child),
  .list-table.gl-all tbody td:not(:last-child) {
      border-right: 1px solid rgba(0, 0, 0, 0.05);
  }

  .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;
      /* No --litepicker-day-width here: it is set once in :root, where the
         month width is derived from it. */

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

  }

  .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: 22px;
      height: 22px;
      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;
  }

  /* Day cell padding is what drives the picker's height: 18px line-height +
     7px top and bottom = 32px rows, against the 37px day width above. Keep the
     two in step if the scale is ever changed again. */
  .litepicker .container__months .month-item-weekdays-row>div {
      padding: 5px 0px;
  }

  .litepicker .container__days>div,
  .litepicker .container__days>a {
      padding: 7px;
  }

  /* ============================================================
  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%; */
  }

  /* ── Brand colour field ───────────────────────────────────────────────────
     A native <input type="color"> and a read-only hex, styled to read as ONE
     control rather than two.

     Both are kept deliberately: the swatch alone hides the value, and a brand
     colour is something people exchange as a code ("our blue is #0F6E56"), not
     just something they look at. The hex is read-only because the swatch is the
     way to change it — a free-text hex field invites half-typed values.

     The ::-webkit-color-swatch / ::-moz-color-swatch pseudo-elements are the only
     way to strip the picker's default chrome, which is why this cannot be done
     with utility classes. */
  .colour-field {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 5px 12px 5px 5px;
      background: #fff;
      border-radius: 8px;
      outline: 1px solid #DEE6ED;
      transition: outline-color 0.12s ease;
  }

  .colour-field:focus-within {
      outline-color: #62A8E0;
  }

  .colour-field input[type="color"] {
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      padding: 0;
      border: none;
      border-radius: 7px;
      background: none;
      cursor: pointer;
  }

  .colour-field input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
  }

  .colour-field input[type="color"]::-webkit-color-swatch {
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 7px;
  }

  .colour-field input[type="color"]::-moz-color-swatch {
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 7px;
  }

  /* app.css styles every .form-container input[type="text"] as a full-width
     bordered box, and it loads AFTER this file — so the extra .form-container
     ancestor here is what wins the override rather than !important. */
  .form-container .colour-field input[type="text"],
  .colour-field input[type="text"] {
      flex: 1;
      width: auto;
      min-width: 0;
      padding: 0;
      border: none;
      outline: none;
      background: transparent;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #475F7B;
      cursor: default;
  }

  .form-container .colour-field input[type="text"]:focus-visible,
  .colour-field input[type="text"]:focus-visible {
      outline: none;
  }