@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-300 text-primary-700;
  }
  .btn-primary:hover {
    @apply bg-primary-700 text-white;
  }

  .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 #363636;
  background-color: #fff;
}
input[type="checkbox"]:checked {
  background-color: #9bd19d;
}

body {
  font-family: KalamehWeb !important;
  background: white;
  --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: #363636;
  padding-top: 30px !important;
}

[data-rsbs-header]::before {
  top: 25px !important;
  background: #b9b9b9 !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 */
}

.hash-span {
  margin-top: -100px;
  padding-bottom: 100px;
  display: block;
}

.black-gradient {
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.violet-gradient {
  background: #b9e4c9;
  background: linear-gradient(-90deg, #b9e4c9 0%, rgba(60, 51, 80, 0) 100%);
  background: -webkit-linear-gradient(
    -90deg,
    #b9e4c9 0%,
    rgba(60, 51, 80, 0) 100%
  );
}

.green-pink-gradient {
  background: "#00cea8";
  background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
  background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
}

.orange-text-gradient {
  background: #f12711; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-text-gradient {
  background: #11998e; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-text-gradient {
  /* background: -webkit-linear-gradient(#eee, #333); */
  background: #56ccf2; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pink-text-gradient {
  background: #ec008c; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* canvas- styles */
.canvas-loader {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff,
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
      1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.bg-hero-pattern {
  background-position: center;
  background-size: cover;
  background-image: url(../public/images/bg.png);
}

.bg-hero-pattern-footer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../public/images/bg.png);
}

.bg-dahs-chart {
  background-image: radial-gradient(
    circle,
    #b16a62,
    #b8645a,
    #be5e52,
    #c45749,
    #c95040
  );
}

.avatarHomePage-0 {
  margin-right: 0;
}
.avatarHomePage-1 {
  margin-right: 20px;
}
.avatarHomePage-2 {
  margin-right: 40px;
}
.avatarHomePage-3 {
  margin-right: 60px;
}

.blink_me {
  animation: blinker 3s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll {
  display: flex;
  width: max-content;
  animation: scroll 300s linear infinite;
}

.fade-mask {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 40%,
    black 50%,
    black 60%,
    black 70%,
    black 80%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 40%,
    black 50%,
    black 60%,
    black 70%,
    black 80%,
    black 90%,
    transparent
  );
}

.vertical-timeline.vertical-timeline--two-columns:before {
  opacity: 0.1; /* Set the opacity to 0.5 */
}