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

@layer base {
  html {
    font-family: 'Poppins', sans-serif;
  }
}

@layer components {
  p {
    @apply pb-4
  }
  hr {
    @apply border-stone-300/50 border-t border-t-2
  }
  .btn {
    @apply cursor-pointer inline-block font-bold border-0 transition-all duration-500 disabled:btn-disabled select-none no-underline
  }

  .btn-sm {
    @apply p-2 text-xs h-9 rounded-xl
  }

  .btn-md {
    @apply p-3 text-sm rounded-2xl
  }

  .btn-primary {
    @apply btn bg-black text-white hover:bg-neutral-800
  }

  .btn-secondary {
    @apply btn bg-stone-200 text-black hover:bg-stone-300;
  }

  .btn-disabled {
    @apply bg-neutral-200 border-neutral-200 text-gray-400 cursor-not-allowed;
  }

  .btn-header {
    @apply rounded-2xl p-3 lowercase bg-yellow-300 hover:bg-amber-300 dark:bg-amber-600 dark:hover:bg-amber-700 dark:text-white font-bold block text-sm transition-all duration-500
  }

  .btn-warn {
    @apply btn bg-red-400 text-black font-bold hover:bg-red-800 hover:text-white

  }

  .errorBox {
    @apply flex flex-col bg-red-100 rounded-lg p-4 mb-4 text-sm text-red-700 top-10 left-10 right-10;
  }

  .menu-item { 
    @apply relative flex justify-between items-center text-gray-400 hover:text-gray-200 hover:bg-gray-800 space-x-2 rounded-md p-2 cursor-pointer;
  }
  .menu-item.active { 
    @apply text-white bg-gray-600 transition-all duration-300;
  }

  .navbar-item {
    @apply p-2 text-blue-400 transition-colors duration-200 rounded-full bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:hover:text-white dark:hover:bg-blue-700 dark:bg-gray-800 focus:outline-none focus:bg-blue-100 dark:focus:bg-blue-700 focus:ring-blue-800;
  }

  div.field_with_errors input:not([type="submit"], [type="checkbox"])  {
    @apply rounded border bg-red-200 border-red-400;
  }

  div.field_with_errors select  {
    @apply rounded border bg-red-200 border-red-400;
  }

  div.field_with_errors~div.ts-wrapper>div.ts-control  {
    @apply rounded border bg-red-200 border-red-400;
  }

  .auth input:not([type=submit],[type=checkbox]), .auth select {
    @apply w-full appearance-none rounded-md border-0 bg-stone-200/75 py-3 px-6 text-base text-black outline-none focus:border-transparent focus:outline-none focus:ring-2 focus:ring-stone-500;
  }

  .auth label {
    @apply mb-1 block text-base font-medium text-stone-700;
  }

  .results-table {
    @apply min-w-full divide-y divide-stone-200 dark:divide-gray-700;
  }

  .results-table thead {
    @apply bg-stone-100 dark:bg-gray-800;
  }

  .results-table th {
    @apply p-4 text-sm font-semibold text-left rtl:text-right text-black dark:text-gray-400;
  }

  .results-table tbody {
    @apply bg-stone-50 divide-y divide-stone-200 dark:divide-gray-700 dark:bg-gray-900
  }

  .results-table tbody td {
    @apply text-gray-800 dark:text-gray-400 p-6 text-sm whitespace-nowrap;
  }

  .invoice-table select, .invoice-table input, .invoice-table textarea {
    @apply text-sm bg-white border border-neutral-200 rounded-lg placeholder-gray-400/70 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40
  }

  .search input[type="search"] select {
    @apply inline rounded p-2 m-2;
  }
  .search input[type="search"]:not([type="checkbox"]) {
    @apply block w-full py-1.5 p-2 text-gray-700 bg-white border border-gray-200 rounded-lg md:w-80 placeholder-gray-400/70 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40;
  }
  .search input[type="checkbox"] {
    @apply form-checkbox h-5 w-5 text-amber-700 bg-gray-50 border-gray-300 focus:ring-4 focus:ring-stone-400 h-4 w-4 rounded pr-2
  }
  .search label {
    @apply text-sm text-stone-800
  }

  .login {
    @apply w-full p-4 text-sm uppercase font-semibold text-white transition-colors duration-300 bg-black rounded-full hover:bg-stone-700 focus:outline-none focus:ring-indigo-200 focus:ring-4 cursor-pointer disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
  }

  .pagination span a {
    @apply inline-block items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md sm:w-auto gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800;
  }

  .pagination .page.disabled {
    @apply opacity-25 inline-block items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md sm:w-auto gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800;
  }

  .pagination .page.active {
    @apply inline-block items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border border-black rounded-md sm:w-auto gap-x-2  dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700;
  }

  .custom-container {
    @apply min-w-full;
  }

  .custom-container input:not([type=submit], [type=checkbox], [type=file], .max-comp ), .custom-container textarea, .custom-container select, .modal textarea, .custom-container .ts-control {
    @apply appearance-none rounded-lg border-0 bg-white/60 py-3 text-base text-black outline-none focus:border-transparent focus:outline-none focus:ring-2 focus:ring-stone-500 disabled:bg-stone-200/50 placeholder:text-stone-400 dark:bg-gray-700 dark:border-gray-500 dark:text-white;
  }

  .modal input:not([type=submit]):not([type="checkbox"]) {
    @apply mb-5 border border-gray-300 text-gray-900 rounded-md focus:ring-blue-500 w-full;
  }
  
  .modal input:not([type=submit]):disabled {
    @apply shadow-none mb-5 bg-gray-100 border border-gray-300 text-gray-900 rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500
  }

  .toggle input:checked {
    background-color: #22c55e; /* bg-green-500 */
    background-image: none;
  }

  .toggle input:checked ~ span:last-child {
    --tw-translate-x: 2.25rem; /* translate-x-7 */
  }

  .toggle label {
    @apply flex;
  }

  .page-title {
    @apply text-xl md:text-3xl font-black text-gray-800 dark:text-white
  }

  .table-button {
    @apply font-bold text-xs uppercase text-gray-500
  }

  .badge {
    @apply px-3 py-1 text-xs text-stone-100 bg-amber-800 rounded-full dark:bg-gray-800 dark:text-blue-400
  }

  /* Status badge styles for dark mode */
  .status-badge {
    @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset select-none;
  }

  .status-badge-green {
    @apply bg-green-50 text-green-700 ring-green-600;
  }

  .dark .status-badge-green {
    @apply bg-green-800 text-green-100 ring-green-500;
  }
  
  .status-badge-red {
    @apply bg-red-50 text-red-700 ring-red-600;
  }

  .dark .status-badge-red {
    @apply bg-red-800 text-red-100 ring-red-500;
  }
  
  .status-badge-yellow {
    @apply bg-yellow-50 text-yellow-700 ring-yellow-600;
  }

  .dark .status-badge-yellow {
    @apply bg-yellow-800 text-yellow-100 ring-yellow-500;
  }
  
  .status-badge-blue {
    @apply bg-blue-50 text-blue-700 ring-blue-600;
  }

  .dark .status-badge-blue {
    @apply bg-blue-800 text-blue-100 ring-blue-500;
  }

  .results-table a, #cases-list a {
    @apply text-amber-700 font-bold hover:underline
  }

  div.case-log-entry:nth-child(odd) {
    @apply bg-white dark:bg-gray-900
  }

  div.case-log-entry {
    @apply bg-stone-50 dark:bg-gray-800
  }

  div.case-log-entry a {
    @apply font-semibold;
  }

  div.case-log-entry a:hover {
    @apply underline;
  }

  .internal-form input:not([type="submit"], [type="checkbox"]), .internal-form select {
    @apply w-full
  }

  .internal-form label + input {
    @apply mt-1 block
  }

  .turbo-progress-bar {
    background: #dfba00;
  }

  .drop-container {
    @apply relative flex gap-2.5 flex-col justify-center items-center text-stone-600 cursor-pointer p-5 rounded-2xl border-2 border-dashed border-stone-400 transition-all duration-200
  }
  .drop-container:hover,
  .drop-container.drag-active {
    @apply border-amber-800 bg-stone-200/50 transition-all duration-200
  }
  .drop-container:hover .drop-title,
  .drop-container.drag-active .drop-title {
    @apply text-stone-500
  }
  .drop-title {
    @apply text-stone-500 text-base font-semibold text-center transition-all duration-200
  }
  .drop-container input[type="file"] {
    @apply max-w-[500px] w-full text-stone-700 border p-2 rounded-2xl border-solid border-stone-400 bg-white
  }
  .drop-container input[type="file"]::file-selector-button {
    @apply text-white cursor-pointer transition-all duration-200 mr-5 px-5 py-2.5 rounded-lg border-0 bg-stone-800
  }
  .drop-container input[type="file"]::file-selector-button:hover {
    @apply bg-black
  }
  
  span.cell-item {
    @apply rounded-md bg-white px-2 py-1 text-xs font-medium text-neutral-600 ring-1 ring-inset ring-gray-500/10
  }

}

  /* Compiled dark classes from Tailwind */
  .dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(55, 65, 81);
  }
  .dark .dark\:bg-gray-50 {
    background-color: rgba(249, 250, 251);
  }
  .dark .dark\:bg-gray-100 {
    background-color: rgba(243, 244, 246);
  }
  .dark .dark\:bg-gray-600 {
    background-color: rgba(75, 85, 99);
  }
  .dark .dark\:bg-gray-700 {
    background-color: rgba(55, 65, 81);
  }
  .dark .dark\:bg-gray-800 {
    background-color: rgba(31, 41, 55);
  }
  .dark .dark\:bg-gray-900 {
    background-color: rgba(17, 24, 39);
  }
  .dark .dark\:bg-red-700 {
    background-color: rgba(185, 28, 28);
  }
  .dark .dark\:bg-green-700 {
    background-color: rgba(4, 120, 87);
  }
  .dark .dark\:hover\:bg-gray-200:hover {
    background-color: rgba(229, 231, 235);
  }
  .dark .dark\:hover\:bg-gray-600:hover {
    background-color: rgba(75, 85, 99);
  }
  .dark .dark\:hover\:bg-gray-700:hover {
    background-color: rgba(55, 65, 81);
  }
  .dark .dark\:hover\:bg-gray-900:hover {
    background-color: rgba(17, 24, 39);
  }
  .dark .dark\:border-gray-100 {
    border-color: rgba(243, 244, 246);
  }
  .dark .dark\:border-gray-400 {
    border-color: rgba(156, 163, 175);
  }
  .dark .dark\:border-gray-500 {
    border-color: rgba(107, 114, 128);
  }
  .dark .dark\:border-gray-600 {
    border-color: rgba(75, 85, 99);
  }
  .dark .dark\:border-gray-700 {
    border-color: rgba(55, 65, 81);
  }
  .dark .dark\:border-gray-900 {
    border-color: rgba(17, 24, 39);
  }
  .dark .dark\:hover\:border-gray-800:hover {
    border-color: rgba(31, 41, 55);
  }
  .dark .dark\:text-white {
    color: rgba(255, 255, 255);
  }
  .dark .dark\:text-gray-50 {
    color: rgba(249, 250, 251);
  }
  .dark .dark\:text-gray-100 {
    color: rgba(243, 244, 246);
  }
  .dark .dark\:text-gray-200 {
    color: rgba(229, 231, 235);
  }
  .dark .dark\:text-gray-400 {
    color: rgba(156, 163, 175);
  }
  .dark .dark\:text-gray-500 {
    color: rgba(107, 114, 128);
  }
  .dark .dark\:text-gray-700 {
    color: rgba(55, 65, 81);
  }
  .dark .dark\:text-gray-800 {
    color: rgba(31, 41, 55);
  }
  .dark .dark\:text-red-100 {
    color: rgba(254, 226, 226);
  }
  .dark .dark\:text-green-100 {
    color: rgba(209, 250, 229);
  }
  .dark .dark\:text-blue-400 {
    color: rgba(96, 165, 250);
  }
  .dark .group:hover .dark\:group-hover\:text-gray-500 {
    color: rgba(107, 114, 128);
  }
  .dark .group:focus .dark\:group-focus\:text-gray-700 {
    color: rgba(55, 65, 81);
  }
  .dark .dark\:hover\:text-gray-100:hover {
    color: rgba(243, 244, 246);
  }
  .dark .dark\:hover\:text-blue-500:hover {
    color: rgba(59, 130, 246);
  }

  /* Custom style */
  .header-right {
      width: calc(100% - 3.5rem);
  }
  .sidebar:hover {
      width: 16rem;
  }
  @media only screen and (min-width: 768px) {
      .header-right {
          width: calc(100% - 16rem);
      }        
  }

  .required:after {
    content:" *";
    color: red;
  }

  .engagement-letter p {
      @apply mb-2;
  }

  .internal-border {
    @apply bg-[repeating-linear-gradient(45deg,_linen,_linen_5px,_peachpuff_5px,_peachpuff_10px)] [background-size:14px_14px] bg-[-1px]
  }

  [x-cloak] { display: none !important; }

  .max-h-0 {
    max-height: 0;
  }

  /* Prevent scrolling while dialog is open */
  body:has(dialog[open]) {
    @apply blur-sm overflow-hidden
  }

  dialog[open] {
    animation: fade-in-up 400ms forwards;
  }
  
  dialog[closing] {
    animation: fade-out-down 400ms forwards;
  }
  
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20vh);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fade-out-down {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(10vh);
    }
  }
    
  div.time_wrapper {
    @apply relative w-fit mx-auto my-0;
  }
  div.time_wrapper div.time_input {
    @apply w-fit flex items-center border-gray-300 border-2 text-indigo-600;
  }
  div.time_wrapper input {
    @apply w-[60px] h-auto box-border text-center text-[#132c14] border-[none] focus:outline-none focus:ring focus:ring-indigo-600;
  
    /* padding: auto 10px; */
  }
  div.time_wrapper label {
    @apply flex flex-col justify-center relative;
  }
  div.time_wrapper .label {
    @apply text-[0.55rem] absolute top-0;
  }
  div.time_wrapper .label.lbl-hrs {
    @apply left-5;
  }
  div.time_wrapper .label.lbl-min {
    @apply left-3.5;
  }
  div.time_wrapper .label.lbl-sec {
    @apply left-[13px];
  }
  
  /* Chrome, Safari, Edge, Opera */
  /*
  div.time_wrapper input::-webkit-outer-spin-button,
  div.time_wrapper input::-webkit-inner-spin-button {
    @apply m-0;
    -webkit-appearance: none;
  }
  */
  /* Firefox */
  div.time_wrapper input[type="number"] {
    -moz-appearance: textfield;
  }
  div.time_wrapper div.time_input,
  div.time_wrapper input {
    @apply rounded-lg;
  }
  div.time_wrapper input:focus + .label {
    @apply text-indigo-600;
  }
  div.time_wrapper input.invalid {
    @apply focus:outline-none focus:ring focus:ring-red-600
  }
  div.time_wrapper input.invalid:focus + .label {
    @apply text-[red];
  }
  div.time_wrapper div.error {
    @apply w-max absolute text-[red] invisible rounded bg-white border border-red-200 pl-2 pr-2 bg-opacity-90 top-[40px];
  }

  table.advanced-search-results { 
    @apply border-2 border-black table-auto;
  }
  table.advanced-search-results th { 
    @apply border border-black bg-slate-200 dark:bg-slate-700 text-right p-1;
  }

  table.advanced-search-results tr { 
    @apply  border-b odd:bg-slate-100 odd:dark:bg-slate-700 hover:bg-slate-200 hover:dark:bg-slate-500;
  }

  table.advanced-search-results td { 
    @apply pl-1 pr-1 border border-slate-100
  }

  div#query-groups-form div.field_with_errors { @apply inline }
  div#query-groups-form div.field_with_errors>select { @apply bg-red-300 }
  div#query-groups-form div.field_with_errors>input { @apply bg-red-300 }
  div.field_with_errors>div.toggle>label { @apply bg-red-300 rounded py-2 border-red-500 border}
  table.quick-search-results { @apply w-full;}
  table.quick-search-results th { @apply text-left;}
  table.quick-search-results tr { @apply border-b;}

  div.user-page { @apply dark:bg-gray-600 bg-stone-50 rounded-md }
  div.user-page p.label { @apply font-bold }
  div.user-page .inactive-comp { @apply opacity-70 }
:root{--ts-pr-clear-button:0;--ts-pr-caret:0;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control{padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper.plugin-drag_drop.multi>.ts-control>div.ui-sortable-placeholder{background:#f2f2f2!important;background:rgba(0,0,0,.06)!important;border:0!important;box-shadow:inset 0 0 12px 4px #fff;visibility:visible!important}.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder:after{content:"!";visibility:hidden}.ts-wrapper.plugin-drag_drop .ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,.2)}.plugin-checkbox_options .option input{margin-right:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:#f8f8f8;border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:none;display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex;padding-right:0!important}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #d0d0d0;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#cacaca}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #d0d0d0;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#cacaca}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{font-smoothing:inherit;color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:6px 8px 3px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{display:inline-block;vertical-align:baseline}.ts-wrapper.multi .ts-control>div{background:#f2f2f2;border:0 solid #d0d0d0;color:#303030;cursor:pointer;margin:0 3px 3px 0;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#e8e8e8;border:0 solid #cacaca;color:#303030}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#fff;border:0 solid #fff;color:#7d7d7d}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{overflow-scrolling:touch;max-height:200px;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}.ts-hidden-accessible{clip:rect(0 0 0 0)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
/*# sourceMappingURL=tom-select.min.css.map */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */