@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  ul[data-wbs-level] > li > p {
    @apply text-sm font-semibold px-7 py-1 border border-white dark:border-stone-900 rounded-lg
  }
  ul[data-wbs-level='1'] > li > p, 
  ul[data-wbs-level='7'] > li > p, 
  ul[data-wbs-level='13'] > li > p {
    @apply bg-yellow-300/15 text-yellow-700 dark:bg-yellow-300/60
  }
  ul[data-wbs-level='2'] > li > p, 
  ul[data-wbs-level='8'] > li > p, 
  ul[data-wbs-level='14'] > li > p {
    @apply bg-red-300/15 text-red-800 dark:bg-red-300/60
  }
  ul[data-wbs-level='3'] > li > p, 
  ul[data-wbs-level='9'] > li > p, 
  ul[data-wbs-level='15'] > li > p  {
    @apply bg-violet-300/15 text-violet-900 dark:bg-violet-300/60
  }
  ul[data-wbs-level='4'] > li > p, 
  ul[data-wbs-level='10'] > li > p, 
  ul[data-wbs-level='16'] > li > p {
    @apply bg-blue-300/15 text-blue-900 dark:bg-blue-300/60
  }
  ul[data-wbs-level='5'] > li > p, 
  ul[data-wbs-level='12'] > li > p, 
  ul[data-wbs-level='18'] > li > p {
    @apply bg-green-300/15 text-green-800 dark:bg-green-300/60;
  }
  ul[data-wbs-level='6'] > li > p, 
  ul[data-wbs-level='12'] > li > p, 
  ul[data-wbs-level='18'] > li > p {
    @apply bg-orange-300/15 text-orange-800 dark:bg-orange-300/60;
  }

/* == forms */

  input:where(:not([type="button"], [type="reset"], [type="submit"])),
  select,
  textarea {
    padding: 0.625rem;
    font-family: var(--font-family-sans);
  }
  .form-checkbox {
    @apply bg-gray-200 flex w-12 h-7 flex-none cursor-pointer rounded-full p-px ring-1 ring-inset ring-gray-400/5 transition-colors duration-200 ease-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 border-white after:translate-x-0 after:relative after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:transform after:rounded-full after:bg-white after:shadow-sm after:ring-1 after:ring-gray-900/5 after:transition after:duration-200 after:ease-in-out checked:after:translate-x-5
  }

  input[type="checkbox"]{
    @apply rounded-sm
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    @apply border border-transparent bg-no-repeat bg-center bg-grass
  }

  input[type=checkbox]:focus, 
  input [type=radio]:focus {
    @apply ring-grass
  }

  input[type=checkbox]:checked:focus, 
  input[type=checkbox]:checked:hover, 
  input[type=radio]:checked:focus, 
  input[type=radio]:checked:hover {
    @apply outline-grass ring-grass bg-grass
  }

  input[type="checkbox"][data-toggle] {
    @apply rounded-full
  }

  input[type="checkbox"][data-toggle]:checked {
    background-image: none;
  }

  
    .form-input,
    .form-select,
    .form-textarea,
    .form-multiselect {
      @apply block w-full rounded mt-1 border-0 py-2 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-grass focus:outline-none placeholder:text-stone-400 disabled:opacity-50 disabled:bg-gray-100 disabled:shadow-none disabled:cursor-not-allowed;
    }

    select, .form-select {
      @apply block w-full rounded mt-1 border-0 py-2 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-grass focus:outline-none placeholder:text-stone-400 disabled:opacity-50 disabled:bg-gray-100 disabled:shadow-none disabled:cursor-not-allowed;
    }

    .form-input-file {
      @apply form-input file:cursor-pointer text-stone-500 file:mr-4 file:py-1 file:px-4 file:rounded-sm file:text-sm file:font-semibold file:border file:border-solid file:text-grass file:bg-stone-100 file:border-stone-200 hover:file:bg-mint
    }


    .form-plain {
      @apply p-0 ring-0 m-0 leading-none border-0 focus:ring-0 focus:outline-none;
    }

    .form-label {
      @apply block text-sm font-medium text-stone-500 capitalize;

    }

    .form-error {
      @apply bg-red-100/50 border border-red-300 text-red-600 p-4 rounded-md mt-4
    }

    .form-error h2 {
      @apply text-red-600 font-medium
    }

    .form-error ul {
      @apply text-red-600 text-sm ml-4 list-disc
    }

    .form-input-error {
      @apply ring-red-300 focus:ring-red-600
    }




    /* BUTTON */
  
    .form-button {
      @apply whitespace-nowrap rounded-md  border border-stone-300  px-3 py-2 text-sm font-medium shadow-sm  hover:outline hover:outline-1 hover:outline-offset-1  hover:outline-slate-300/35 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  cursor-pointer disabled:opacity-50   disabled:cursor-not-allowed  disabled:border disabled:text-slate-600 disabled:border-slate-400 disabled:bg-gray-100
    }

    .form-button-primary {
     @apply form-button bg-grass text-white hover:bg-grass hover:outline-green-700/25 focus-visible:outline-grass 
    }

  
    .form-button-secondary {
      @apply form-button bg-white border border-grass text-grass  hover:bg-grass hover:border-grass/50 hover:text-white  focus-visible:outline-grass ;
    }
  
    .form-button-danger {
      @apply form-button bg-white border border-red-600 text-red-600 hover:bg-red-500 hover:border-red-500 hover:text-white  focus-visible:outline-red-600;
    }
  
    .form-button-tertiary {
      @apply form-button shadow-none bg-white border-white text-gray-600  hover:text-green-700 hover:border-white hover:outline-none ;
    }
    
    .form-button-sm {
      @apply form-button px-3 py-1 text-sm
    }

    .form-button-lg {
      @apply form-button px-3.5 py-2.5 text-lg 
    }
  
    .form-button-xl {
      @apply form-button px-6 py-3 text-xl 
    }
    

    .form-button-secondary-sm {
      @apply form-button-secondary form-button-sm
    }

    .form-button-secondary-lg {
      @apply form-button-secondary form-button-lg
    }
  
    .form-button-secondary-xl {
      @apply form-button-secondary form-button-xl
    }

    .form-button-primary-sm {
      @apply form-button-primary form-button-sm
    }

    .form-button-primary-lg {
      @apply form-button-primary form-button-lg
    }
  
    .form-button-primary-xl {
      @apply form-button-primary form-button-xl
    }
  
    

    

    /* ICON ONLY  */

    .form-button-icon {
      @apply form-button flex place-items-center p-0 size-11;
    }

    .form-button-icon svg path  {
      @apply fill-grass
    }

    .form-button-icon-primary {
      @apply form-button-primary flex place-items-center p-0 size-11
    }

    .form-button-icon svg, .form-button-icon-primary svg,  .form-button-icon-secondary svg, .form-button-icon-danger svg, .form-button-icon-tertiary svg  {
      @apply mx-auto;
    }

    .form-button-icon-primary svg path  {
      @apply fill-white
    }
  
    .form-button-icon-secondary {
      @apply form-button-secondary flex place-items-center p-0 size-11
    }

    .form-button-icon-secondary svg path  {
      @apply fill-grass
    }
    .form-button-icon-secondary:hover svg path, .form-button-icon-danger:hover svg path {
      @apply fill-white;
    }
  
    .form-button-icon-danger {
      @apply form-button-danger flex place-items-center p-0 size-11;
    }

    .form-button-icon-danger svg path  {
      @apply fill-red-600
    }
  
  
    .form-button-icon-tertiary {
      @apply form-button-tertiary flex place-items-center p-0 size-11
    }

    .form-button-icon-tertiary svg path  {
      @apply fill-grass
    }

    /* BUTTON WITH ICON */
    .form-button-with-icon {
      @apply form-button flex place-items-center
    }

    .form-button-with-icon-primary {
      @apply form-button-primary flex hover:text-white hover:fill-white
    }

    .form-button-with-icon-secondary {
      @apply form-button-secondary flex
    }

    .form-button-with-icon-tertiary {
      @apply form-button-tertiary flex
    }

    .form-button-with-icon-danger {
      @apply form-button-danger flex
    }

    .form-button-with-icon svg, 
    .form-button-with-icon-primary svg, 
    .form-button-with-icon-secondary svg, 
    .form-button-with-icon-tertiary svg, 
    .form-button-with-icon-danger svg {
      @apply mr-1 mt-0.5
    }
    .form-button-with-icon svg path {
      @apply fill-grass
    }

    .form-button-with-icon-primary svg path {
      @apply fill-white
    }

    .form-button-with-icon-secondary svg path {
      @apply fill-grass
    }

    .form-button-with-icon-tertiary svg path {
      @apply fill-slate-600

    }

    .form-button-with-icon-danger svg path {
      @apply fill-red-600
    }


    .form-button-with-icon:hover svg path {
      @apply fill-slate-700
    }

    .form-button-with-icon-secondary:hover svg path {
      @apply fill-white
    }

    .form-button-with-icon-tertiary:hover svg path {
      @apply fill-grass

    }

    .form-button-with-icon-danger:hover svg path {
      @apply fill-white
    }


    /* == flatpickr */
    .flatpickr-months .flatpickr-prev-month:hover,
    .flatpickr-months .flatpickr-next-month:hover {
      @apply text-stone-400
    }

    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
      @apply fill-grass
    }
    
 
    .flatpickr-current-month .numInputWrapper {
      @apply cursor-pointer block
    }

    .flatpickr-current-month .numInputWrapper span:hover {
      @apply bg-stone-100
    }
    .flatpickr-current-month .numInputWrapper span:active {
      @apply bg-stone-200
    }
    .flatpickr-current-month .numInputWrapper:hover {
      @apply bg-stone-100
    }

    
    
    /* == actualized dates */

  .date-planned button, .date-actual button {
    @apply font-semibold text-center rounded-lg size-9 mt-1
  } 

  .date-planned [data-controller='popover'] button, .date-actual [data-controller='popover'] button {
    @apply size-full mt-0
  } 




  /* == update window */

  .date-actual.outside-update-window input, 
  .date-actual.outside-update-window button, 
  .date-planned.outside-update-window input,  
  .date-planned.outside-update-window button {
    @apply text-slate-300 bg-slate-50
  }

  .date-planned.inside-update-window input, 
  .date-planned.inside-update-window button {
    @apply text-yellow-600 bg-amber-200/75
  }

  .date-actual.inside-update-window input, 
  .date-actual.inside-update-window button {
    @apply text-slate-900 bg-slate-50
  }

  .date-actual.inside-update-window input,
  .date-planned.inside-update-window input,
  .date-planned.outside-update-window input,
  .date-actual.outside-update-window input {
    @apply text-center max-w-24
  }




/* == download */
.download-button {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='24' viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3809 0.800781C13.5801 0.800781 13.7516 0.872721 13.8955 1.0166C14.0394 1.15495 14.1113 1.32096 14.1113 1.51465V12.6543L14.0532 14.2231L14.709 13.5425L16.5103 11.6499C16.6431 11.5005 16.8091 11.4258 17.0083 11.4258C17.1965 11.4258 17.3542 11.4894 17.4814 11.6167C17.6143 11.7384 17.6807 11.8906 17.6807 12.0732C17.6807 12.1729 17.6613 12.2614 17.6226 12.3389C17.5838 12.4163 17.5312 12.4883 17.4648 12.5547L13.9121 16.0161C13.818 16.1047 13.7295 16.1683 13.6465 16.207C13.5635 16.2402 13.4749 16.2568 13.3809 16.2568C13.2868 16.2568 13.1982 16.2402 13.1152 16.207C13.0322 16.1683 12.9437 16.1047 12.8496 16.0161L9.29688 12.5547C9.22493 12.4883 9.1696 12.4163 9.13086 12.3389C9.09766 12.2614 9.08105 12.1729 9.08105 12.0732C9.08105 11.8906 9.14193 11.7384 9.26367 11.6167C9.39095 11.4894 9.54867 11.4258 9.73682 11.4258C9.94157 11.4258 10.1104 11.5005 10.2432 11.6499L12.0527 13.5425L12.7085 14.2314L12.6504 12.6543V1.51465C12.6504 1.32096 12.7223 1.15495 12.8662 1.0166C13.0101 0.872721 13.1816 0.800781 13.3809 0.800781ZM7.22168 23.3374C6.15365 23.3374 5.34847 23.069 4.80615 22.5322C4.26383 22.001 3.99268 21.2041 3.99268 20.1416V9.4917C3.99268 8.4292 4.26383 7.62956 4.80615 7.09277C5.34847 6.55599 6.15365 6.2876 7.22168 6.2876H10.7827V7.76514H7.25488C6.67383 7.76514 6.22835 7.91732 5.91846 8.22168C5.6141 8.52604 5.46191 8.97428 5.46191 9.56641V20.0586C5.46191 20.6562 5.6141 21.1073 5.91846 21.4116C6.22835 21.716 6.67383 21.8682 7.25488 21.8682H19.5068C20.0768 21.8682 20.5168 21.716 20.8267 21.4116C21.1421 21.1073 21.2998 20.6562 21.2998 20.0586V9.56641C21.2998 8.97428 21.1421 8.52604 20.8267 8.22168C20.5168 7.91732 20.0768 7.76514 19.5068 7.76514H15.979V6.2876H19.54C20.6136 6.2876 21.4188 6.55876 21.9556 7.10107C22.4979 7.63786 22.769 8.43473 22.769 9.4917V20.1416C22.769 21.1986 22.4979 21.9954 21.9556 22.5322C21.4188 23.069 20.6136 23.3374 19.54 23.3374H7.22168Z' fill='%235f6368'/%3E%3C/svg%3E%0A");
}

/* == menu */

/* == collapse */

[data-collapse-target="content"] {
  height: auto;
  max-height: auto; /* Set to a reasonable max height */
  opacity: 1;
  transform: scaleY(1);
  transition: max-height 0.2s ease-in, opacity 0.3s ease-in, transform 0.2s ease-in;
  transform-origin: top left;
  will-change: max-height, opacity, transform;
  background-repeat: no-repeat;
  background-position: 7px 5px;
}

.collapsed {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.95);
}

li.wbs-item {
  /* Default closed state */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.87216 13.4902C2.53538 13.4902 2.25033 13.3736 2.01699 13.1402C1.78366 12.9069 1.66699 12.6218 1.66699 12.2851V4.6954C1.66699 4.35862 1.78366 4.07357 2.01699 3.84023C2.25033 3.6069 2.53538 3.49023 2.87216 3.49023H6.53233L7.86566 4.82357H13.1285C13.4653 4.82357 13.7503 4.94023 13.9837 5.17357C14.217 5.4069 14.3337 5.69196 14.3337 6.02873V12.2851C14.3337 12.6218 14.217 12.9069 13.9837 13.1402C13.7503 13.3736 13.4653 13.4902 13.1285 13.4902H2.87216Z' fill='black' fill-opacity='0.33'/%3E%3C/svg%3E%0A");

  background-repeat: no-repeat;
  background-position: 8px 6px;
}

li.wbs-item.expanded {
  /* Open state */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.83366 13.4902C2.50977 13.4902 2.23433 13.3768 2.00733 13.1499C1.78044 12.9229 1.66699 12.6475 1.66699 12.3236V4.6954C1.66699 4.37151 1.78688 4.08968 2.02666 3.8499C2.26644 3.61012 2.54827 3.49023 2.87216 3.49023H6.53232L7.86566 4.82357H13.1285C13.4268 4.82357 13.6841 4.91996 13.9003 5.11273C14.1165 5.3054 14.2418 5.54235 14.276 5.82357H2.66699V12.2851C2.66699 12.3321 2.67877 12.3705 2.70233 12.4004C2.72577 12.4304 2.75671 12.4561 2.79516 12.4774L4.35033 7.28507H15.4555L13.8413 12.6621C13.7652 12.9124 13.6227 13.113 13.4138 13.2639C13.2048 13.4148 12.973 13.4902 12.7183 13.4902H2.83366Z' fill='black' fill-opacity='0.33'/%3E%3C/svg%3E%0A");
}

/* == filter */

[data-menu-target="menu"] {
  transition: 200ms cubic-bezier(.17,.67,.46,1);
  transform-origin: top right;
  position: absolute;
}

[data-menu-target="trigger"]  {
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: 50% 50%;
}

#activity_code_filters [data-menu-target="menu"]{
  @apply h-screen max-h-96 overflow-y-auto;
}

#activity_code_filters [data-menu-target="trigger"] {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3276_7031)'%3E%3Cpath d='M2.11557 12.6988H13.8464C15.0918 12.6988 15.7987 11.9864 15.7987 10.605V3.38817C15.7987 2.00136 15.0863 1.29436 13.6832 1.29436H6.91229C6.40106 1.29436 6.12372 1.18559 5.75934 0.870155L5.34602 0.522093C4.88375 0.119647 4.552 0 3.85044 0H1.85452C0.663496 0 0 0.658055 0 1.99048V10.605C0 11.9918 0.712442 12.6988 2.11557 12.6988ZM2.13732 11.7362C1.37593 11.7362 0.962612 11.3338 0.962612 10.5506V2.0503C0.962612 1.32155 1.33786 0.957171 2.04487 0.957171H3.61115C4.11148 0.957171 4.38341 1.06594 4.75323 1.39225L5.16655 1.74031C5.61249 2.12644 5.97147 2.25696 6.67299 2.25696H13.6669C14.4119 2.25696 14.8361 2.65941 14.8361 3.43712V10.5561C14.8361 11.3338 14.4119 11.7362 13.6669 11.7362H2.13732ZM0.581915 4.8348H15.2223V3.92658H0.581915V4.8348Z' fill='%235F6368' fill-opacity='0.85'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3276_7031'%3E%3Crect width='16' height='12.775' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

#filters [data-menu-selection-made-value="true"] [data-menu-target="trigger"] {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1362_4052)'%3E%3Cpath d='M15.4778 7.73555C15.4778 11.9965 12.0032 15.4711 7.73555 15.4711C3.47461 15.4711 0 11.9965 0 7.73555C0 3.47461 3.47461 0 7.73555 0C12.0032 0 15.4778 3.47461 15.4778 7.73555ZM5.80508 10.3035C5.49551 10.3035 5.27285 10.5029 5.27285 10.7923C5.27285 11.0981 5.49551 11.2945 5.80508 11.2945H9.69902C10.0056 11.2945 10.2252 11.0981 10.2252 10.7923C10.2252 10.5029 10.0056 10.3035 9.69902 10.3035H5.80508ZM4.59512 7.69336C4.28252 7.69336 4.06289 7.88975 4.06289 8.19561C4.06289 8.4917 4.28252 8.69112 4.59512 8.69112H10.9022C11.2186 8.69112 11.4382 8.4917 11.4382 8.19561C11.4382 7.88975 11.2186 7.69336 10.9022 7.69336H4.59512ZM3.4377 5.10273C3.1251 5.10273 2.90547 5.29912 2.90547 5.60498C2.90547 5.89434 3.1251 6.09375 3.4377 6.09375H12.0664C12.3662 6.09375 12.5956 5.89434 12.5956 5.60498C12.5956 5.29912 12.3662 5.10273 12.0664 5.10273H3.4377Z' fill='%235f6368'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1362_4052'%3E%3Crect width='15.8392' height='15.4809' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}


#filters [data-menu-target="trigger"] {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3286_7052)'%3E%3Cpath d='M8.66615 15.7759C13.0204 15.7759 16.5572 12.2453 16.5572 7.89098C16.5572 3.53671 13.0204 0 8.66615 0C4.31191 0 0.78125 3.53671 0.78125 7.89098C0.78125 12.2453 4.31191 15.7759 8.66615 15.7759ZM8.66615 14.6495C4.92962 14.6495 1.90767 11.6275 1.90767 7.89098C1.90767 4.15443 4.92962 1.13247 8.66615 1.13247C12.4027 1.13247 15.4247 4.15443 15.4247 7.89098C15.4247 11.6275 12.4027 14.6495 8.66615 14.6495Z' fill='%235F6368' fill-opacity='0.85'/%3E%3Cpath d='M4.36613 6.24379H12.9778C13.2745 6.24379 13.4865 6.05602 13.4865 5.77139C13.4865 5.48676 13.2745 5.29297 12.9778 5.29297H4.36613C4.06938 5.29297 3.85742 5.48676 3.85742 5.77139C3.85742 6.05602 4.06938 6.24379 4.36613 6.24379ZM5.51677 8.82361H11.8271C12.1239 8.82361 12.3358 8.6359 12.3358 8.35126C12.3358 8.06661 12.1239 7.87282 11.8271 7.87282H5.51677C5.22002 7.87282 5.00807 8.06661 5.00807 8.35126C5.00807 8.6359 5.22002 8.82361 5.51677 8.82361ZM6.72192 11.4217H10.628C10.9188 11.4217 11.1307 11.2279 11.1307 10.9432C11.1307 10.6586 10.9188 10.4709 10.628 10.4709H6.72192C6.42517 10.4709 6.21321 10.6586 6.21321 10.9432C6.21321 11.2279 6.42517 11.4217 6.72192 11.4217Z' fill='%235F6368' fill-opacity='0.85'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3286_7052'%3E%3Crect width='16' height='15.788' fill='white' transform='translate(0.78125)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

[data-menu-target="menu"] input[type='checkbox']:focus, [data-menu-target="menu"] input[type='radio']:focus {
  @apply ring-1 ring-neutral-200 rounded-full 
}

[data-menu-target="menu"] input[type='checkbox']:not(:checked), [data-menu-target="menu"] input[type='radio']:not(:checked) {
  background-color: transparent;
  border: none;
  background-image: none;
  outline: none;
}

[data-menu-target="menu"] input[type='checkbox']:checked,  [data-menu-target="menu"] input[type='radio']:checked {
  background-color: transparent;
  outline: none;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.23633 15.2065C5.79362 15.2065 5.41732 15.0156 5.10742 14.6338L0.807617 9.33789C0.685872 9.19401 0.597331 9.0529 0.541992 8.91455C0.492188 8.7762 0.467285 8.63232 0.467285 8.48291C0.467285 8.15088 0.577962 7.87695 0.799316 7.66113C1.02067 7.44531 1.30013 7.3374 1.6377 7.3374C2.01953 7.3374 2.34049 7.50065 2.60059 7.82715L6.20312 12.3926L13.2339 1.25293C13.3778 1.03158 13.5272 0.876628 13.6821 0.788086C13.8371 0.69401 14.0308 0.646973 14.2632 0.646973C14.6007 0.646973 14.8774 0.752116 15.0933 0.962402C15.3091 1.17269 15.417 1.44108 15.417 1.76758C15.417 1.90039 15.3949 2.0332 15.3506 2.16602C15.3063 2.29883 15.2371 2.43717 15.1431 2.58105L7.37354 14.6006C7.10791 15.0046 6.72884 15.2065 6.23633 15.2065Z' fill='#a3a3a3'/%3E%3C/svg%3E%0A");
}

.animate-load {
  animation: fade-in .25s ease-in forwards;
}

/* = dropzone */
@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px)
  }

  30%,
  70% {
    opacity: 1;
    transform: translateY(0px)
  }

  100% {
    opacity: 0;
    transform: translateY(-40px)
  }

}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px)
  }

  30% {
    opacity: 1;
    transform: translateY(0px)
  }

}

@keyframes pulse {
  0% {
    transform: scale(1)
  }

  10% {
    transform: scale(1.1)
  }

  20% {
    transform: scale(1)
  }

}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Dropzone styles */
.dropzone {
  @apply min-h-48 border border-opacity-80 border-black rounded-md flex justify-center rounded-lg border-2 border-dashed border-stone-800/25 mb-8;
}

.dropzone.dz-clickable {
  @apply cursor-pointer;
}

.dropzone.dz-clickable * {
  @apply cursor-default;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  @apply cursor-pointer;
}

.dz-started .dz-message {
  @apply hidden;
}

.dropzone.dz-drag-hover {
  @apply border;
}

.dropzone.dz-drag-hover .dz-message {
  @apply opacity-50;
}

.dropzone .dz-message {
  @apply text-center;
}

.dropzone .dz-message .dz-button {
  @apply bg-none text-inherit border-none p-0 cursor-pointer outline-none;
}

.dropzone .dz-preview {
  @apply relative align-top m-2 w-full bg-stone-300/25 rounded-md text-center;
}

.dropzone .dz-preview:hover {
  @apply z-10;
}

.dropzone .dz-preview .dz-remove {
  @apply bg-white text-sm text-center cursor-pointer relative -top-1 border border-stone-800/25 rounded-full inline-block mx-auto py-1.5 px-4 -mt-12;
}

.dropzone .dz-preview .dz-remove:hover {
  @apply border-green-800/50 bg-grass text-white;
}

.dropzone .dz-preview .dz-details {
  @apply text-sm w-full text-center text-black/90 absolute top-12 flex flex-col flex-col-reverse;
}

.dropzone .dz-preview .dz-details .dz-size {
  @apply mb-1;
}

.dropzone .dz-preview .dz-details .dz-filename {
  @apply whitespace-nowrap text-xl;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  @apply overflow-hidden text-ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  @apply bg-white/50 px-2 py-1 rounded-md leading-8;
}

.dropzone .dz-preview:hover .dz-image img {
  @apply scale-105 blur-sm transition-transform;
}

.dropzone .dz-preview .dz-image {
  @apply rounded-md overflow-hidden z-0 w-full h-full;
}

.dropzone .dz-preview .dz-image img {
  @apply object-contain object-center w-full;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  @apply pointer-events-none opacity-0 absolute block top-1/2 left-1/2 -ml-7 -mt-7 bg-black/80 rounded-full z-20;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  @apply block w-14 h-14 fill-white;
}

.dropzone .dz-preview .dz-progress {
  @apply opacity-100 z-30 pointer-events-none absolute h-5 bottom-4 left-10 right-10 border bg-black/80 rounded-full overflow-hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  @apply bg-grass block relative h-full w-0 transition-all duration-300 rounded-full;
}

.dropzone .dz-preview .dz-error-message {
  @apply pointer-events-none z-50 absolute block hidden opacity-0 transition-opacity duration-300 ease-in rounded-lg text-sm top-48 -left-2.5 w-96 bg-red-700 p-2 text-white;
  transition: opacity .3s ease;
}

.dropzone .dz-preview .dz-error-message:after {
  @apply absolute -top-4 left-32 w-0 h-0 border-t-4 border-t-red-700 border-x-transparent;
}


/*# sourceMappingURL=dropzone.css.map */
.dz-started .dz-message {
  @apply hidden
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity .2s linear
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all .2s linear
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity .4s ease-in
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  animation: pulse 6s ease infinite
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)
}

#connectivity-status.offline {
  @apply fixed bottom-4 left-4 bg-yellow-300 text-yellow-800 bg-no-repeat bg-center size-12 rounded-full;
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='19' viewBox='0 0 23 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.63135 4.82129L6.77441 6.97363C5.29622 7.57975 3.97266 8.5013 2.80371 9.73828C2.70475 9.84342 2.58724 9.89909 2.45117 9.90527C2.32129 9.90527 2.20687 9.8527 2.10791 9.74756L0.799805 8.43945C0.713216 8.34668 0.666829 8.24772 0.660645 8.14258C0.660645 8.03125 0.697754 7.9292 0.771973 7.83643C1.26676 7.24886 1.83887 6.7015 2.48828 6.19434C3.14388 5.68099 3.85824 5.22331 4.63135 4.82129ZM11.2275 6.07373L8.57422 3.41113C9.08757 3.31217 9.58236 3.23796 10.0586 3.18848C10.541 3.139 11.0142 3.11426 11.478 3.11426C12.9191 3.11426 14.3138 3.31836 15.6621 3.72656C17.0166 4.13477 18.2536 4.69759 19.373 5.41504C20.4925 6.1263 21.4326 6.93343 22.1934 7.83643C22.2676 7.9292 22.3047 8.03125 22.3047 8.14258C22.3047 8.24772 22.2552 8.34668 22.1562 8.43945L20.8574 9.73828C20.7585 9.84342 20.644 9.89909 20.5142 9.90527C20.3843 9.90527 20.2729 9.85889 20.1802 9.76611C19.0422 8.59098 17.7526 7.6849 16.3115 7.04785C14.8766 6.41081 13.2964 6.07373 11.5708 6.03662C11.5151 6.03662 11.4564 6.03971 11.3945 6.0459C11.3389 6.05208 11.2832 6.06136 11.2275 6.07373ZM8.79688 8.97754L11.311 11.501C10.7173 11.5133 10.139 11.6092 9.57617 11.7886C9.01335 11.9679 8.48454 12.2122 7.98975 12.5215C7.50114 12.8245 7.07129 13.1771 6.7002 13.5791C6.59505 13.6904 6.47754 13.7523 6.34766 13.7646C6.21777 13.7708 6.09717 13.7214 5.98584 13.6162L4.5293 12.1875C4.44271 12.1009 4.39323 12.005 4.38086 11.8999C4.37467 11.7948 4.41178 11.6958 4.49219 11.603C4.98698 11.0216 5.60238 10.5021 6.33838 10.0444C7.08057 9.58057 7.90007 9.22493 8.79688 8.97754ZM17.8887 12.7349L14.1313 8.97754C15.0096 9.2002 15.8353 9.54655 16.6084 10.0166C17.3815 10.4867 18.0062 11.0155 18.4824 11.603C18.5505 11.6958 18.5814 11.7948 18.5752 11.8999C18.5752 12.005 18.5288 12.1009 18.436 12.1875L17.8887 12.7349ZM11.4873 14.0244C12.1429 14.0244 12.7459 14.1698 13.2964 14.4604C13.8468 14.7511 14.2829 15.1006 14.6045 15.5088C14.6787 15.6016 14.7096 15.7036 14.6973 15.8149C14.6849 15.9263 14.6354 16.0221 14.5488 16.1025L12.2852 18.292C12.0996 18.4714 11.9481 18.592 11.8306 18.6538C11.7192 18.7218 11.6048 18.7559 11.4873 18.7559C11.376 18.7559 11.2646 18.7218 11.1533 18.6538C11.042 18.592 10.8905 18.4714 10.6987 18.292L8.42578 16.1025C8.34538 16.0283 8.29281 15.9448 8.26807 15.8521C8.24951 15.7531 8.26807 15.6634 8.32373 15.583C8.64535 15.1501 9.08757 14.7821 9.65039 14.479C10.2132 14.1759 10.8255 14.0244 11.4873 14.0244ZM19.3174 17.8467L3.64795 2.18652C3.5057 2.05046 3.43457 1.87728 3.43457 1.66699C3.43457 1.45671 3.5057 1.28044 3.64795 1.13818C3.78402 0.995931 3.95719 0.927897 4.16748 0.934082C4.37777 0.934082 4.55404 1.00521 4.69629 1.14746L20.3564 16.8076C20.5049 16.9499 20.5791 17.123 20.5791 17.3271C20.5791 17.5312 20.5049 17.7044 20.3564 17.8467C20.2204 17.9889 20.0503 18.0601 19.8462 18.0601C19.6421 18.0601 19.4658 17.9889 19.3174 17.8467Z' fill='black'/%3E%3C/svg%3E%0A");
}

#offline-sync-status.error {
  @apply fixed bottom-4 left-4 bg-red-300 text-red-800 bg-no-repeat bg-center size-12 rounded-full;
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='19' viewBox='0 0 23 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 1C10.6716 1 10 1.67157 10 2.5V13.5C10 14.3284 10.6716 15 11.5 15C12.3284 15 13 14.3284 13 13.5V2.5C13 1.67157 12.3284 1 11.5 1ZM11.5 16C10.6716 16 10 16.6716 10 17.5C10 18.3284 10.6716 19 11.5 19C12.3284 19 13 18.3284 13 17.5C13 16.6716 12.3284 16 11.5 16Z' fill='black'/%3E%3C/svg%3E");
}

#offline-sync-status.success {
  @apply fixed bottom-4 left-4 bg-green-300 text-green-800 bg-no-repeat bg-center size-12 rounded-full;
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='19' viewBox='0 0 23 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 14.5858L3.70711 9.79289C3.31658 9.40237 2.68342 9.40237 2.29289 9.79289C1.90237 10.1834 1.90237 10.8166 2.29289 11.2071L7.79289 16.7071C8.18342 17.0976 8.81658 17.0976 9.20711 16.7071L20.7071 5.20711C21.0976 4.81658 21.0976 4.18342 20.7071 3.79289C20.3166 3.40237 19.6834 3.40237 19.2929 3.79289L8.5 14.5858Z' fill='black'/%3E%3C/svg%3E");
}

.password-invisible {
  @apply block size-5 rounded-full bg-no-repeat text-transparent; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='#A8A8A0' class='size-5'%3E%3Cpath d='M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z' /%3E%3Cpath fill-rule='evenodd' d='M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
}

.password-visible {
  @apply block size-5 rounded-full bg-no-repeat text-transparent; 

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='#A8A8A0' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M3.28 2.22a.75.75 0 0 0-1.06 1.06l14.5 14.5a.75.75 0 1 0 1.06-1.06l-1.745-1.745a10.029 10.029 0 0 0 3.3-4.38 1.651 1.651 0 0 0 0-1.185A10.004 10.004 0 0 0 9.999 3a9.956 9.956 0 0 0-4.744 1.194L3.28 2.22ZM7.752 6.69l1.092 1.092a2.5 2.5 0 0 1 3.374 3.373l1.091 1.092a4 4 0 0 0-5.557-5.557Z' clip-rule='evenodd' /%3E%3Cpath d='m10.748 13.93 2.523 2.523a9.987 9.987 0 0 1-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 0 1 0-1.186A10.007 10.007 0 0 1 2.839 6.02L6.07 9.252a4 4 0 0 0 4.678 4.678Z' /%3E%3C/svg%3E%0A");
}


}

@layer utilities {
  /* Make utility classes */
  .slideover {
    transform: translateX(-100%);
    transition: 333ms cubic-bezier(.17,.67,.46,1);
  }  

  .slideover[open] {
    transform: translateX(0%);
  }


  /* Prevent scrolling while dialog is open */
  body:has(dialog[data-dialog-target='dialog'][open]) {
    overflow: hidden;
  }

  .cal_num {
     @apply pt-2 text-sm
  }

  .cal_num, .cal_day {
    @apply block 
  }

  .cal_day {
    @apply uppercase text-xxs tracking-wider text-gray-500 pb-2
  }

  /* Customize the dialog backdrop */

  @keyframes scale-and-fade-in {
    0% {
      transform: scale(0.75) translateY(15%);
      opacity: 0;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    100% {
      transform: scale(0.75) translateY(15%);
      opacity: 0;
    }
  }

  dialog[data-dialog-target='dialog'] {
    transform-origin: center;
  }

  /* Add animations */
  dialog[data-dialog-target='dialog'][open] {
    animation: scale-and-fade-in 200ms cubic-bezier(.17,.67,.46,1);
  }

  dialog[data-dialog-target='dialog'][closing] {
    animation: scale-and-fade-in 200ms cubic-bezier(.17,.67,.46,1);
  }

  .toggle {
    transition: 333ms cubic-bezier(.17,.67,.46,1);
  }

  .toggle[data-toggle-open-value='false'] {
    transform: translateY(-50%) scale(0.5);
    opacity: 0;
  }

  .toggle[data-toggle-open-value='true'] {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  
  [data-popover-target="card"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(100% - 0.75rem - 3px);
    left: calc(50% - 0.75rem);
    border-width: 0.75rem;
    border-radius: 7px;
    transform: rotate(-37deg) skewY(-15deg);
    border-color:transparent transparent white white;
    @apply shadow-2xl;
  }

  .expand {
    @apply bg-neutral-100 px-2 rounded-xl mx-3 w-96;
  }

  

  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }

  .alert-notice {
    @apply bg-green-100  rounded-lg p-4 text-grass mx-4;
  }

  .alert-error {
    @apply bg-red-100  rounded-lg p-4 text-red-600 mx-4;
  }

  .alert-warning {
    @apply bg-yellow-100  rounded-lg p-4 text-yellow-600 mx-4;
  }

  .reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.90);
    transition: 400ms cubic-bezier(0.17, 0.84, 0.44, 1);
    transition-property: opacity, transform;
    transition-delay: 200ms;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* ==flash.css */

  .flash {
    @apply rounded-md shadow font-medium mx-auto flex items-center px-4 py-2.5 text-left fixed top-2 right-4 flex-nowrap z-50
  }

  .flash--notice, .flash--success {
    color: #005d14;
    background: #a8e4bc;
  }

  .flash--alert, .flash--error {
    color: #bb0000;
    background: #ecb4b4;
  }

  .flash__closeBtn {
    background: 0;
    border: 0;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    margin: 0 0 0 1rem;
    padding: 0;
    transform: translateY(0px);
  }

  .flash--alert .flash__closeBtn svg path, .flash--error .flash__closeBtn svg path {
    @apply fill-red-800 hover:fill-red-900;
  }

  .flash--notice .flash__closeBtn svg path, .flash--success .flash__closeBtn svg path {
    @apply fill-green-700 hover:fill-green-900;
  }


}

.flatpickr-input {
  @apply form-input w-full rounded-md px-2 py-1.5 ring-transparent
}

.flatpickr-current-month {
  @apply flex gap-2 items-center justify-between
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  @apply py-0.5
}

.flatpickr-current-month span.cur-month:hover {
  @apply bg-stone-100
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  @apply bg-stone-100
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  @apply bg-mint border-grass outline-0 cursor-pointer
}
.flatpickr-day.today {
  @apply border-mint text-grass
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  @apply bg-mint text-grass
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  @apply bg-mint border-grass text-grass
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  /* -webkit-box-shadow: -10px 0 0 var(--blue);
          box-shadow: -10px 0 0 var(--blue); */
  @apply shadow-inner shadow-mint
}

.flatpickr-day.week.selected {
  /* border-radius: 0; */
  /* -webkit-box-shadow: -5px 0 0 var(--blue), 5px 0 0 #569ff7; */
          /* box-shadow: -5px 0 0 var(--blue), 5px 0 0 #569ff7; */
  @apply shadow-inner shadow-mint rounded-none
}

.flatpickr-highlight {
  @apply bg-mint
}



.datepicker .view-switch {
  @apply text-lg whitespace-nowrap
}

.datepicker .datepicker-grid {
  @apply w-72
}

.datepicker .datepicker-cell {
  @apply font-normal text-base rounded-full leading-10
}

.datepicker .day.next, .datepicker .day.prev {
  @apply text-neutral-300
}

.datepicker .datepicker-cell.focused {
  @apply font-medium rounded-full bg-mint text-grass
}

.datepicker .dow {
  @apply text-xs font-normal uppercase text-neutral-400
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  @apply bg-grass border-grass text-white
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/Satoshi-Variable-0513381f.woff2") format("woff2 supports variations"),
       url("/assets/Satoshi-Variable-0513381f.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/Satoshi-VariableItalic-7955f7fb.woff2") format("woff2 supports variations"),
       url("/assets/Satoshi-VariableItalic-7955f7fb.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: italic;
}

.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 475;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}

.italic {
  font-variation-settings: "ital" 1;
  font-synthesis: none;
}

.text-shadow {
    text-shadow: 2px 2px black;
}

[data-controller="hint"] {
  @apply relative;
}

.hint {
  @apply absolute h-6 z-10 bottom-0 font-extralight whitespace-nowrap bg-stone-800/85 text-white text-xs px-3 py-1 rounded-full shadow transition delay-500 opacity-100 scale-100 translate-y-6 -translate-x-2 ease-in-out transition-all duration-200 shadow-stone-400 origin-top-left	;
}

.hint.invisible {
  @apply opacity-0 scale-50 translate-y-4;
}

.tooltip {
  @apply invisible absolute bg-stone-900 text-white;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50;
}

.turbo-progress-bar {
  @apply bg-grass rounded-full;
}

.search {
  @apply relative -left-2 cursor-pointer;
}

.search div {
  @apply absolute transition-all duration-300 ease-in-out w-6 -top-3 right-0
}

.search img {
  @apply size-6
}

.search .close-button {
  @apply opacity-0 transition-opacity duration-300 ease-in-out
}

.search .search-button {
  @apply absolute -left-1 top-0 size-6
}

.search input {
  @apply font-sans absolute top-1 left-10 right-10 h-7 opacity-0 transition-opacity duration-300 ease-in-out border-0 bg-transparent outline-none p-0;
}

.search.expanded div {
  @apply absolute right-0 -top-4 bg-stone-100 h-9 rounded-lg py-2 px-3 w-72
}


.search.expanded input {
  @apply opacity-100 w-48 w-56 focus:ring-stone-100 focus:ring-0
}

.search.expanded .search-button {
  @apply absolute left-3 top-2 size-5
}

.search.expanded .close-button {
  @apply opacity-100 absolute right-2 top-2 size-5
}

.popover {
  @apply flex z-40 place-items-center content-center bg-stone-100 rounded-lg shadow-lg border border-stone-200;
  --arrow-size: 14px;
  --arrow-width: 48px;
  --arrow-height: 14px;
  box-shadow:  0 0 64px -8px rgba(60, 60, 54, 0.5);
}

.popover::after {
  content: '';
  position: absolute;
  z-index: 10;
  width: var(--arrow-width);
  height: var(--arrow-height);
  background: inherit;
  mask-image: url("data:image/svg+xml,%3Csvg width='48' height='14' viewBox='0 0 48 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.673828 13.2065C2.38632 13.2065 4.09831 13.215 5.8108 13.1965C7.44981 13.1785 9.28426 13.153 10.8793 12.5515C12.6023 11.9015 13.7429 10.765 14.8906 9.42747C15.7168 8.46545 17.3399 6.4129 18.1301 5.42188C18.7769 4.60936 20.0431 3.00333 20.7344 2.22631C21.6046 1.24879 22.6803 0.20977 24.1743 0.20977C25.6684 0.20977 26.7436 1.24879 27.6133 2.22531C28.3046 3.00183 29.5707 4.60886 30.218 5.42088C31.0073 6.4119 32.6303 8.46445 33.4571 9.42647C34.6067 10.764 35.7454 11.9005 37.4679 12.5505C39.0634 13.1505 40.8983 13.1775 42.5364 13.1955C44.2493 13.214 45.9613 13.2055 47.6738 13.2055' fill='white'/%3E%3C/svg%3E%0A");
  mask-repeat: no-repeat;
  mask-size: cover;
}

.popover::before {
  content: '';
  position: absolute;
  z-index: 11;
  width: var(--arrow-width);
  height: var(--arrow-height);
  background: inherit;
  mask-image: url("data:image/svg+xml,%3Csvg width='48' height='15' viewBox='0 0 48 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.419922 13.7697C2.13241 13.7697 3.52998 13.7881 5.24247 13.7696C6.88148 13.7516 8.82847 13.7314 10.4235 13.1299C12.1465 12.4799 13.4611 11.0888 14.6087 9.75123C15.435 8.78921 17.1614 6.71243 17.9517 5.72141C18.5985 4.90889 19.7717 3.33118 20.463 2.55416C21.3332 1.57664 22.4337 0.798886 23.9277 0.798886C25.4218 0.798886 26.4925 1.57764 27.3622 2.55416C28.0535 3.33068 29.2336 4.90939 29.8809 5.72141C30.6702 6.71243 32.3513 8.78921 33.178 9.75123C34.3277 11.0888 35.5581 12.4643 37.2806 13.1143C38.8761 13.7143 40.6207 13.6893 42.2588 13.7073C43.9717 13.7258 45.7227 13.7115 47.4352 13.7115' stroke='%23E6E5E4'/%3E%3C/svg%3E%0A");
  mask-repeat: no-repeat;
  mask-size: cover;
  @apply bg-stone-200;
}

.popover-arrow-top::after {
  top: calc(-1 * var(--arrow-height) + 1px);
  left: 50%;
  transform: translateX(-50%);
}

.popover-arrow-top::before {
  top: calc(-1 * var(--arrow-height));
  left: 50%;
  transform: translateX(-50%);
}

.popover-arrow-bottom::after {
  bottom: calc(-1 * var(--arrow-height) + 1px);
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.popover-arrow-bottom::before {
  bottom: calc(-1 * var(--arrow-height));
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.popover-arrow-left::after {
  left: -30px;
  top: 30px;
  transform: translateY(-50%) rotate(-90deg);
}

.popover-arrow-left::before {
  top: 30px;
  left: -31px;
  transform: translateY(-50%) rotate(-90deg);
}

.popover-arrow-right::after {
  right: -30px;
  top: 40px;
  transform: translateY(-50%) rotate(90deg);
}

.popover-arrow-right::before {
  right: -31px;
  top: 40px;
  transform: translateY(-50%) rotate(90deg);
}

.highlight {
  @apply bg-mint;
}
.percent-complete-field {
  @apply w-[65px] border-0 py-1.5 mt-1 text-stone-900 ring-1 ring-inset ring-stone-100 rounded-lg bg-white focus:ring-2 focus:ring-inset focus:ring-grass focus:outline-none placeholder:text-stone-400 disabled:opacity-50 disabled:bg-gray-100 disabled:shadow-none disabled:cursor-not-allowed;

  background-position: 78% 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.98497 2.72005C5.98497 4.26505 4.88997 5.37505 3.35997 5.37505C1.82997 5.37505 0.719971 4.26505 0.719971 2.72005C0.719971 1.17505 1.82997 0.0500488 3.35997 0.0500488C4.88997 0.0500488 5.98497 1.17505 5.98497 2.72005ZM11.43 0.260049L3.26997 11H2.18997L10.335 0.260049H11.43ZM5.08497 2.72005C5.08497 1.65505 4.37997 0.920048 3.35997 0.920048C2.32497 0.920048 1.61997 1.65505 1.61997 2.72005C1.61997 3.77005 2.33997 4.52005 3.35997 4.52005C4.36497 4.52005 5.08497 3.77005 5.08497 2.72005ZM12.915 8.54005C12.915 10.085 11.82 11.195 10.29 11.195C8.75997 11.195 7.64997 10.085 7.64997 8.54005C7.64997 6.99505 8.75997 5.87005 10.29 5.87005C11.82 5.87005 12.915 6.99505 12.915 8.54005ZM12.015 8.54005C12.015 7.47505 11.31 6.74005 10.29 6.74005C9.25497 6.74005 8.54997 7.47505 8.54997 8.54005C8.54997 9.59005 9.26997 10.325 10.29 10.325C11.295 10.325 12.015 9.59005 12.015 8.54005Z' fill='%23545456' fill-opacity='0.34'/%3E%3C/svg%3E%0A");
}