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

@layer components {
  /* .btn-outline-primary {
    @apply bg-transparent hover:bg-sky-400 text-sky-400  hover:text-white border-2 border-sky-400 border-opacity-60  rounded-full   py-2   transition;
  }
  .btn-primary {
    @apply bg-sky-400 hover:bg-sky-400 text-white  hover:text-white border-2 border-sky-400 border-opacity-60  rounded-full   py-2   transition;
  } */
  .btn {
    @apply font-bold py-2 px-4 rounded transition-all;
  }

  .btn-primary {
    @apply bg-primary-200 text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-300;
  }

  .btn-secondary {
    @apply bg-secondary-100 text-white;
  }
  .btn-secondary:hover {
    @apply bg-secondary-200;
  }

  .btn-info {
    @apply bg-info-100 text-white;
  }
  .btn-info:hover {
    @apply bg-info-200;
  }

  .form-control {
    @apply !appearance-none !border-[2px] !bg-body-100 !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
  }

  .form-control-white {
    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
  }
}

input[type="checkbox"] {
  /* Hide the default checkbox appearance */
  appearance: inherit;
  /* -webkit-appearance: none; */
  /* -moz-appearance: none; */

  /* Set the desired size and border radius */
  width: 40px;
  height: 40px;
  border-radius: 30px; /* Use a percentage for a circular shape */

  /* Add custom styling */
  border: 2px solid hsl(14, 82%, 47%);
  background-color: #fff;
}
input[type="checkbox"]:checked {
  background-color: #da4215;
}

body {
  font-family: KalamehWeb !important;
  background: #eeeeee;
  --toastify-font-family: KalamehWeb !important;
  --Chart-defaults-font-family: KalamehWeb !important;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

.tr2 {
  transition: 2s;
}

.tr03 {
  transition: 0.3s all;
}

.fuck-cick {
  pointer-events: none;
}

.bg-BigPlus {
  background: rgba(0, 0, 0, 0.9);
}

.loader {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 0.9s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

[data-rsbs-backdrop] {
  z-index: 100000 !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}
[data-rsbs-overlay] {
  z-index: 999 !important;
  overflow: hidden;
}
[data-rsbs-header] {
  background-color: #356859;
  padding-top: 30px !important;
}

[data-rsbs-header]::before {
  top: 20px !important;
}

.DatePicker {
  width: 100%;
  margin-top: 10px;
}
.responsive-datePicker {
  /* by setting font-size, all the elements will correspond */
  font-size: 9px !important; /* default to 10px */
}

@media (max-width: 1500px) {
  .responsive-datePicker {
    font-size: 8px !important;
  }
}

@media (max-width: 1200px) {
  .responsive-datePicker {
    font-size: 7px !important;
  }
}

@media (max-width: 768px) {
  .responsive-datePicker {
    font-size: 6px !important;
  }
}

/* Large screens */
@media (min-width: 2500px) {
  .responsive-datePicker {
    font-size: 12px !important;
  }
}
.DatePicker__CalenderContainer {
  top: -100px !important;
  z-index: 100000;
}

.delete {
  --border-size: 3px;
  --border-angle: 0turn;
  width: 180px;
  height: fit-content;
  padding: 17px;
  margin-right: 10px;
  background-image: conic-gradient(
      from var(--border-angle),
      transparent,
      transparent 50%,
      transparent
    ),
    conic-gradient(
      from var(--border-angle),
      transparent 1%,
      rgb(179, 4, 4),
      rgb(133, 2, 2),
      rgb(204, 0, 0)
    );
  background-size: calc(100% - (var(--border-size) * 6))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: bg-spin 1s linear infinite;
  border-radius: 15px;
  margin-top: 5px;
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  animation-play-state: paused;
}
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

#swich-shifts::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#swich-shifts {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}