@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import 'tailwindcss';

:root {
  --background: #ffffff;
  --foreground: #171717;
}
@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-smd: 991px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1366px;
  --breakpoint-3xl: 1536px;
}
/*tailwind custom container class start */
.container {
  margin: auto;
}

/* @media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
} */

@media (min-width: 1024px) {
  .container {
    padding: 0 3rem;
  }
}

@media (min-width: 1366px) {
  .container {
    padding: 0 5rem;
  }
}

@media (min-width: 1500px) {
  .container {
    padding: 0;
    max-width: 1418px; 
  }
}

/* custom container end */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'jostregualar', sans-serif;
}

@font-face {
  font-family: 'jostregualar';
  src: url('/fonts/Jost-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'allura-font';
  src: url('/fonts/Allura-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

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

.gradientline::before {
  content: '';
  position: absolute;
  background: #ffffff;
  background: linear-gradient(
    269deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(194, 194, 194, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  width: 140%;
  height: 1px;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Label style after Input feild is in focus. Can also use input:focus ~ label to select sibling. */
/* Floating Label Animation (exact match from CodePen) */
/* Floating Label Form Styles */
.floating-form .input-wrap {
  position: relative;
  width: 100%;
}

.floating-form input {
  border: 2px solid #afbdcf;
  border-radius: 5px;
  height: 53px;
  width: 100%;
  color: #000;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 58px;
  box-shadow: none;
  background: transparent;
  z-index: 2;
  position: relative;
}

.floating-form label {
  font-size: 16px;
  color: #151515;
  padding: 0 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.floating-form input:focus,
.floating-form input.filled {
  outline: none;
}

.floating-form input:focus + label,
.floating-form input.filled + label {
  font-size: 18px;
  color: #151515;
  top: 0px;
  left: 25px;
  background: #fff;
  padding: 0 5px;
  z-index: 3;
}
label.active_label{
  font-size: 18px;
  color: #151515;
  top: 0px;
  left: 25px;
  background: #fff;
  padding: 0 5px;
  z-index: 3;
}
.floating-form input[type='password'] {
  /* font-size: 20px !important; */
  /* padding-top: 10px; */
  color: #505050 !important;
}

.modalAnim {
  animation: modalAnim 0.5s ease-out;
}
@keyframes modalAnim {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0px);
  }
}

.banner_gradient {
  background: #100509;
  background: linear-gradient(
    85deg,
    rgba(16, 5, 9, 1) 30%,
    rgba(89, 23, 47, 1) 70%
  );
}
.allura-regular {
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-style: normal;
}

.datatable tr th:first-child,.datatable td:first-child{
  padding-left: 60px;
}
.datatable tr th:last-child,.datatable td:last-child{
  padding-right: 60px;
}

.scrollable-element::-webkit-scrollbar{height: 2px; width: 6px;background-color: #E4E4E4;}
.scrollable-element::-webkit-scrollbar-track {background: none; border-radius: 10px; }
.scrollable-element::-webkit-scrollbar-thumb {background: #A9A9A9; border-radius: 10px; }
.scrollable-element::-webkit-scrollbar-thumb:hover {background: #A9A9A9; border-radius: 10px; }
.scrollable-element::-webkit-scrollbar-thumb:horizontal{background: #E4E4E4;border-radius: 10px;}


@media (max-width: 1700px) {
  .gradientline:before {
    width: 110%;
  }
  .floating-form label {
    font-size: 14px;
  }
  .floating-form input:focus + label,
  .floating-form input.filled + label {
    font-size: 15px;
    top: 0;
  }
}
@media (max-width: 1574px) {
  .floating-form input {
    height: 40px;
    font-size: 12px;
  }
}