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

@layer components {
  .btn {
    @apply py-2 px-4 rounded transition-all;
  }

  .btn-primary {
    @apply bg-primary-500 text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-600;
  }

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

  .btn-light {
    @apply bg-gray-100 text-black;
  }
  .btn-light:hover {
    @apply bg-gray-300 text-black;
  }

  .btn-outline-light {
    @apply border border-gray-100 text-white;
  }
  .btn-outline-light:hover {
    @apply bg-gray-100 text-black;
  }

  .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-navbar !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-gray-300 focus:!outline-none;
  }

  .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;
  }
}

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-header {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../public/images/bg-header.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.bg-navbar {
  background: rgba(240, 240, 240, 0.4);
}

.bg-navbar2 {
  background: rgba(240, 240, 240, 0.2);
}

.bg-glass {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.4px);
  -webkit-backdrop-filter: blur(4.4px);
}

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

/* Hide scrollbar for IE, Edge and Firefox */
#swich-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.bg-login {
  height: 100vh;

  --s: 200px; /* control the size */
  --c: #2189a836; /* first color */

  --_g: #b3222200 8%, var(--c) 0 17%, #b3222200 0 58%;
  background: linear-gradient(
        135deg,
        #b3222200 20.5%,
        var(--c) 0 29.5%,
        #b3222200 0
      )
      0 calc(var(--s) / 4),
    linear-gradient(45deg, var(--_g)) calc(var(--s) / 2) 0,
    linear-gradient(135deg, var(--_g), var(--c) 0 67%, #d6afaf00 0),
    linear-gradient(
      45deg,
      var(--_g),
      var(--c) 0 67%,
      #b3222200 0 83%,
      var(--c) 0 92%,
      #b3222200 0
    ),
    #1095c1; /* second color */
  background-size: var(--s) var(--s);
}

.scroll-1 {
  overflow: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #2ab1da57 #b1b1b1; /* Firefox */
}

/* Styles for WebKit browsers (Chrome, Safari) */
.scroll-1::-webkit-scrollbar {
  width: 5px;
}

.scroll-1::-webkit-scrollbar-thumb {
  background-color: #2ab1da1c;
}

.scroll-1::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}