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

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

@layer base {
  body {
    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
  }
}

@layer components {}


@layer utilities {
  /* Chrome, Safari and Opera */

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

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .chat-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }

  .inbox-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }

  .bg-whiten {
    background-color: #ffffff;
    /* This ensures the background is white */
  }

  .text-body {
    color: #333333;
    /* Replace with your desired color */
  }

  .border-primary {
    border: 1px solid blue;
    /* Replace with your desired color */
  }

  .bg-primary {
    border: 1px solid blue;
    /* Replace with your desired color */
  }
}

/* third-party libraries CSS */

.tableCheckbox:checked~div span {
  @apply opacity-100;
}

.tableCheckbox:checked~div {
  @apply border-primary bg-primary;
}



.custom-input-date::-webkit-calendar-picker-indicator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

.custom-input-date-1::-webkit-calendar-picker-indicator {
  background-image: url(../images/icon/icon-calendar.svg);
}

.custom-input-date-2::-webkit-calendar-picker-indicator {
  background-image: url(../images/icon/icon-arrow-down.svg);
}

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