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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


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

 @layer base {
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
    body {
      @apply relative z-1 bg-whiten font-roboto text-base font-normal text-body;
    }
  }
  
  @layer components {
  }
  
  @layer utilities {
    html{
      font-family: "Roboto", sans-serif !important;
    }
    /* 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)];
    }
  }
  
  /* third-party libraries CSS */
  
  .tableCheckbox:checked ~ div span {
    @apply opacity-100;
  }
  .tableCheckbox:checked ~ div {
    @apply border-primary bg-primary;
  }
  
  .apexcharts-legend-text {
    @apply !text-body dark:!text-bodydark;
  }
  .apexcharts-text {
    @apply !fill-body dark:!fill-bodydark;
  }
  .apexcharts-xcrosshairs {
    @apply !fill-stroke dark:!fill-strokedark;
  }
  .apexcharts-gridline {
    @apply !stroke-stroke dark:!stroke-strokedark;
  }
  .apexcharts-series.apexcharts-pie-series path {
    @apply dark:!stroke-transparent;
  }
  .apexcharts-legend-series {
    @apply !inline-flex gap-1.5;
  }
  .apexcharts-tooltip.apexcharts-theme-light {
    @apply dark:!border-strokedark dark:!bg-boxdark;
  }
  .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply dark:!border-strokedark dark:!bg-meta-4;
  }
  .apexcharts-xaxistooltip,
  .apexcharts-yaxistooltip {
    @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
  }
  .apexcharts-xaxistooltip-bottom:after {
    @apply !border-b-gray dark:!border-b-meta-4;
  }
  .apexcharts-xaxistooltip-bottom:before {
    @apply !border-b-gray dark:!border-b-meta-4;
  }
  .apexcharts-xaxistooltip-bottom {
    @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
  }
  .apexcharts-tooltip-series-group {
    @apply !pl-1.5;
  }
  
  .flatpickr-wrapper {
    @apply w-full;
  }
  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    @apply fill-primary;
  }
  .flatpickr-calendar.arrowTop:before {
    @apply dark:!border-b-boxdark;
  }
  .flatpickr-calendar.arrowTop:after {
    @apply dark:!border-b-boxdark;
  }
  .flatpickr-calendar {
    @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
  }
  .flatpickr-day {
    @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
  }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    @apply !top-7 dark:!fill-white dark:!text-white;
  }
  .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    @apply !left-7;
  }
  .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
  .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    @apply !right-7;
  }
  span.flatpickr-weekday,
  .flatpickr-months .flatpickr-month {
    @apply dark:!fill-white dark:!text-white;
  }
  .flatpickr-day.inRange {
    @apply dark:!shadow-7;
    box-shadow: -5px 0 0 #eff4fb, 5px 0 0 #eff4fb;
  }
  .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 border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
  }
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.selected,
  .flatpickr-day.endRange {
    @apply dark:!text-white;
  }
  .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: #3c50e0;
    @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
  }
  .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)) {
    box-shadow: -10px 0 0 #3c50e0;
  }
  
  .map-btn .jvm-zoom-btn {
    @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pt-0 pb-0.5 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:text-bodydark dark:hover:border-primary dark:hover:text-white;
  }
  .mapOne .jvm-zoom-btn {
    @apply left-auto top-auto bottom-0;
  }
  .mapOne .jvm-zoom-btn.jvm-zoomin {
    @apply right-10;
  }
  .mapOne .jvm-zoom-btn.jvm-zoomout {
    @apply right-0;
  }
  .mapTwo .jvm-zoom-btn {
    @apply top-auto bottom-0;
  }
  .mapTwo .jvm-zoom-btn.jvm-zoomin {
    @apply left-0;
  }
  .mapTwo .jvm-zoom-btn.jvm-zoomout {
    @apply left-10;
  }
  
  .taskCheckbox:checked ~ .box span {
    @apply opacity-100;
  }
  .taskCheckbox:checked ~ p {
    @apply line-through;
  }
  .taskCheckbox:checked ~ .box {
    @apply border-primary bg-primary dark:border-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;
  }
  

  /*sidebar*/
  .sidebar-connect{
    background:linear-gradient(to right, #FB4F14 0%, #FADC41 100%);
  }

  p,span,h5{
    font-size: 16px;
  }

  .show-in-color-Ok{
    background-color: green;
    color: white;
  }
  .show-in-color-Pending{
    background-color: orange;
    color: white;
  }
  .show-in-color-Error{
    background-color: red;
    color: white;
  }

  .pagination{
    padding: 1rem;
    text-align: center;
  }
  .pagination .previous_page, .pagination .next_page{
    padding: 4px 7px;
    border: 1px solid gray;
    border-radius: 7px;

  }
  .pagination .current{
    color: #FB4F14;
  }

  form input {
    background-color: white;
  }

  .true.status-sphere{
    border-radius:50%;
    width: 20px;
    height: 20px;
    background-color: green;
  }
  .false.status-sphere{
    border-radius:50%;
    width: 20px;
    height: 20px;
    background-color: red;
  }