@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("iconfonts/css/all.css");

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

body {
  scrollbar-gutter: stable;
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f5f7fa;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #a4c1d2;
    border-radius: 100vh;
    border: 1px solid #a4c1d2;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a4c1d2;
  }
  .scrollbar-0::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .scrollbar-2::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

*,
*:focus {
  outline: none;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
}

.ql-toolbar.ql-snow {
  border-color: #dee9f1 !important;
  border-radius: 4px 4px 0 0;
  background-color: #fff;
}
.ql-container.ql-snow {
  border-color: #dee9f1 !important;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
}
.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 {
  background: #6899b5 !important;
  border-color: #6899b5 !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #6899b5 !important;
  background: #6899b5 !important;
}
.flatpickr-day.today {
  border-color: #6899b5 !important;
}
.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 {
  background: #c4d6e0 !important;
  border-color: #c4d6e0 !important;
}

.fc .fc-scroller-liquid {
  height: 100% !important;
  overflow: unset !important;
}
.fc .fc-list-event:hover td {
  background-color: transparent !important;
}
.dx-gantt .dx-gantt-taskWrapper {
  height: 40px;
  display: flex;
  align-items: center;
}

.mentions-input .mentions-input__input {
  min-height: 40px;
  border-color: #dee9f1;
  border-radius: 4px;
  font-size: 14px !important;
}
.mentions-input .mentions-input__input:focus {
  border-color: #dee9f1;
  box-shadow: none;
}
.mentions-input .mentions-input__suggestions {
  top: 100% !important;
  margin: 10px 0 0 !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px;
  border-radius: 4px;
  padding: 5px 0;
}
.mentions-input .mentions-input__suggestions__list {
  position: relative;
  max-height: 200px;
  overflow: auto;
}
.mentions-input .mentions-input__suggestions__list::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.mentions-input .mentions-input__suggestions__list::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #f5f7fa;
}
.mentions-input .mentions-input__suggestions__list::-webkit-scrollbar-thumb {
  background: #a4c1d2;
  border-radius: 100vh;
  border: 1px solid #a4c1d2;
}
.mentions-input .mentions-input__suggestions__list::-webkit-scrollbar-thumb:hover {
  background: #a4c1d2;
}
.mentions-input .mentions-input__suggestions__item {
  padding: 5px 12px;
  font-size: 13px;
}
.mentions-input .mentions-input__suggestions__item.mentions-input__suggestions__item--focused {
  background-color: #dee9f1;
}

@media (prefers-color-scheme: dark) {
}

@media screen and (max-width: 1024px) {
  .fc .fc-toolbar-title {
    font-size: 1.25em !important;
  }
}

@media screen and (max-width: 480px) {
  .fc .fc-toolbar-title {
    font-size: 1em !important;
  }
  .fc .fc-button {
    font-size: 14px !important;
  }
}