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

@import 'cards.scss';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
$chat-bot-image: '../images/chatBotBg.png';
.chat-bot-background {
  background-image: url(#{$chat-bot-image});
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--sixteen);
}

* {
  font-family: 'Inter', sans-serif;
}

:root {
  --baseOne: #0a2750;
  --baseTwo: #1654ac;
  --baseThree: #dbe8fa;
  --baseBorder: #aeccf4;
  --baseFour: hsl(0, 0%, 100%);
  --accent1: #f4f5f9;
  --baseFive: #edf3fd;
  --baseSix: #00000080;
  --tweleve: 12px;
  --sixteen: 16px;
  --twenty: 20px;
  --twentyfour: 24px;
  --thirytwo: 32px;
  --thirtysix: 36px;
  --fourty: 40px;
  --backgroundwhite: #ffffff;
  --backgroundone: #707070;
  --backgroundTwo: #373fff;
  --backgroundThree: #3acaf8;
  --backgroundFour: #f8f8f8;
  --backgroundFive: #0a2750;
  --backgroundSix: #9dedf0;
  --backgroundSeven: #ffd5e5;
  --backgroundEight: #495057;
  --backgroundf58400: #f58400;
  --background073663: #073663;
  --backgroundEEF0F6: #eef0f6;
  --baseOne: #0a2750;
  --baseTwo: #1654ac;
  --baseThree: #dbe8fa;
  --baseBorder: #aeccf4;
  --baseFour: hsl(0, 0%, 100%);
  --accent1: #f4f5f9;
  --baseFive: #edf3fd;
  --baseSix: #00000080;
  --tweleve: 12px;
  --sixteen: 16px;
  --fourteen: 14px;
  --Eighteen: 18px;
  --twenty: 20px;
  --twentyfour: 24px;
  --thirytwo: 32px;
  --thirtysix: 36px;
  --fourty: 40px;
  --backgroundwhite: #ffffff;
  --backgroundone: #707070;
  --backgroundTwo: #373fff;
  --backgroundThree: #3acaf8;
  --backgroundFour: #f8f8f8;
  --backgroundFive: #0a2750;
  --backgroundSix: #9dedf0;
  --backgroundSeven: #ffd5e5;
  --backgroundEight: #495057;
  --backgroundf58400: #f58400;
  --background073663: #073663;
  --backgroundEEF0F6: #eef0f6;
  --backgroundef4444: #ef4444;
  --background999999: #999999;
  --backgroundacbace: #acbace;
  --background888: #888;
  --background555: #555;
  --backgroundfafafa: #fafafa;
  --backgrounde0e0e0: #e0e0e0;
  --tx-primary: 59, 130, 246;
  /* Blue */
  --tx-secondary: 99, 102, 241;
  /* Indigo */
  --tx-accent: 168, 85, 247;
  /* Purple */
  --tx-surface: 255, 255, 255;
  --tx-surface-dark: 17, 24, 39;
  --tx-text: 17, 24, 39;
  --tx-text-light: 107, 114, 128;
  --tx-border: 229, 231, 235;
  --tx-success: 34, 197, 94;
  --tx-warning: 251, 146, 60;
  --tx-error: 239, 68, 68;
  --xxl: 1920px;
  --xxsm: 0.375rem;
  --xsm: 0.75rem; //12px
  --base: 1rem; //16px
  --sm: 0.875rem; //14px
  --lg: 1.125rem; //18px
  --xl: 1.25rem; //20px
  --xxlg: 1.5rem; //24px
  --xxxl: 2rem; //32px
  --ten: 10px;
  --twentyeight: 28px;
  --thirty: 30px;
  --thirtysix: 36px;
  --fourty: 40px;
  --white: #ffffff;
  --brandbgdark: #181287;
  --body: #555f68;
  --brand: #0a2750;
  --successborder: #00a706;
  --errorborder: #ff0016;
  --iconbg: #1b10de;
  --title: #373d43;
  --placeholder: #7f8691;
  --background: #f5f7f9;
  --outline: #e2e8f0;
  --surface: #ced4da;
  --success: #00b843;
  --info: #1d6eec;
  --alert: #f58400;
  --error: #ff3333;
  --disabled: #c6d5e4;
  --errorbg: #ffe0e4;
  --alertbg: #fff7e0;
  --successbg: #e3fcee;
  --tableheader: #e6edf7;
  --brandbg: #f5f5ff;
  --scrollbar: #d9d9d9;
  --scrollbarhover: #555;
  --shadow: #1018280f;
  --tooltipbg: #0c111d;
  --buttonhover: #140ac8;
  --tableheadbg: #e6edf7;
  --buttonborder: #d0d5dd;
  --buttondisable: #dfddf8;
  --dropdownbg: #eff2f5;
  --secondary: #1363df;
  --refreshbg: #e0f1ff;
  --inlineborder: #160cde;
  --buttonbgsc: #4747ff;
  --lightgray: #eaecf0;
  --togglebg: #e7e6f5;
  --deleteapp: #f93243;
  --infobox: #fff4db;
  --infoboxtext: #f96b35;
  --deletebg: #fff0f0;
  --blue: #0f3cee;
  --titleandheading: #40474e;
  --inputborder: #c8cdd6;
  --popupbg: #1018288f;
  --number: #1e16b1;
  --adddisable: #b0b0b0;
  --boxborder: #e2e3e9;
  --boxbg: #f7f7fb;
  --cardborder: #bcc0d8;
  --selectedcardbg: #e5ecff;
  --loaderborder: #e3e0ff;
  --toggleborder: #d4d3f0;
  --alertbg: #ffecdc;
  --alertborder: #ffe0c8;
  --lastrunbg: #f4f7fe;
  --cancelButton: #ffe0e0;
  --selected: #c12fb3;
  --primaryGradient: linear-gradient(104.04deg, #bbf8fa 0%, #ffd6e6 100%);
  --generateGradient: linear-gradient(95.81deg, #01d1da -2.67%, #3872fd -2.66%, #fe3481 100%);
  --cardTitle: #173680;
  --countgradient: linear-gradient(90deg, #1060ea 0%, #03a3da 100%);
  --snapshotcolor: #524adb;
  --videocolor: #9451e9;
  --snapshotbg: #ecebff;
  --videobg: #f4ebff;
  --snapshotborder: #d4d1ff;
  --videoborder: #e3ccfff0;
  --successbod: #abefc6;
  --tabhover: #ecebff;
  --togglebg: #eef2f6;
  --searchbg: #f0f4ff;
  --promptborder: #ebecef;
  --upload: #cbadeb;
  --uploadBackGround: #f7f0ff;
  --download: #aac6ec;
  --downloadBackGround: #f0f6ff;
  --createNew: #1d16a1;
  --statusNone: #ff4903;
  --statusFail: #ffd6dd;
  --filterHover: #115ea3;
  --viewMore: #65707b;
  --fileClose: #808297;
  --inputFocus: #007bff;
  --rowbg: #f1f0ff;
  --rowborder: #5d53fb;
  --accodianborder: #f4f5f7;
  --rowindex: #a0bce2;
  --indexbackground: #f5f7f9;
  --black: #000000;
  --toggle: #1e90ff;
  --togglebg: #f7f7f7;
  --fileborder: #00000040;
  // --brand: #0a2750;
  --progressbg: #dfebf6;
  --progressbarbg: #035faa;
  --creationbg: #f4f5f9;
  --promptbtn: linear-gradient(95.81deg, #01d1da -2.67%, #3872fd -2.66%, #fe3481 100%);
  --prevbg: #edf1fd;
  --btnbg: linear-gradient(98.81deg, #e8feff 0%, #ffeaf2 100%);
  --tabsborder: #eaecf0;
  --searchbg: #f0f4ff;
  --filterbg: #ebf1ff;
  --basebg: #edf1f5;
  --lastrunText: #11047a;
  --recommendButton: #c239b3;
  --cardValue: #002379;
  --tooltipbg: #e6e6fa;
  --viewmorebg: linear-gradient(104.04deg, #b3fcff 0%, #ffccdf 100%);
  --username: #004bb3;
  --cardsGradient: linear-gradient(153.83deg, #9dedf0 0%, #ffd5e5 100%);
  --subtitle: #0e356d;
  --project-bg: #eef0f6;
  --countcase: linear-gradient(53.94deg, #373fff 15.02%, #3acaf8 82.83%);
  --casebg: #e2e0ff;
  --passcount: linear-gradient(53.94deg, #22fc00 15.02%, #a0ff91 82.83%);
  --failcount: linear-gradient(53.94deg, #ff0105 15.02%, #ffdcdc 82.83%);
  --overviewbg: #e4e2fe;
  --icongradient: linear-gradient(53.94deg, #0a2750 15.02%, #3acaf8 82.83%);
  --chatbotBorder: #e7eaee;
  --chatBotHeader: #312d76;
  --suggestBoxBorder: #f3f4f6;
  --chatBotButtons: #e6edfe;
}
@media screen and (min-width: 1024px) and (max-width: 1600px) {
  :root {
    --xsm: 0.625rem !important;
    --sm: 0.875rem !important;
    --base: 0.75rem !important;
    --lg: 1rem !important;
    --xl: 1.125rem !important;
    --xxlg: 1.25rem !important;
    --xxxl: 1.625rem !important;
    --twentyeight: 24px;
    --thirty: 26px;
    --thirtysix: 32px;
    --fourty: 36px;
    --ten: 6px;
  }
}
input:focus {
  outline: none;
}
// h2,
// h3,
// p {
//   margin-bottom: 0;
// }

// button {
//   background-color: inherit;
//   border: none;
// }

// input {
//   border: none;
// }

// @layer base {
//   :root {
//     --baseOne: #0a2750;
//     --baseTwo: #1654ac;
//     --baseThree: #dbe8fa;
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(0, 0%, 100%);
//     --accent1: #f4f5f9;
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//     --tweleve: 12px;
//     --sixteen: 16px;
//     --twenty: 20px;
//     --twentyfour: 24px;
//     --thirytwo: 32px;
//     --thirtysix: 36px;
//   }

//   // @media (prefers-color-scheme: light) {
//   //   :root {
//   //     --baseOne: hsl(229, 57%, 11%);
//   //     --baseTwo: hwb(243 86% 0%);
//   //     --baseThree: hsl(228, 56%, 26%);
//   //     --baseBorder: #aeccf4;
//   //     --baseFour: hsl(229, 57%, 11%);
//   //     --accent1: hsl(6, 100%, 80%);
//   //     --baseFive: #edf3fd;
//   //     --baseSix: #00000080;
//   //   }
//   // }

@media screen and (min-width: 1024px) and (max-width: 1600px) {
  :root {
    --tweleve: 10px !important;
    --sixteen: 12px !important;
    --twenty: 18px !important;
    --twentyfour: 20px !important;
    --thirytwo: 26px !important;
    --thirtysix: 30px !important;
    --fourty: 34px !important;
    --fourteen: 10px !important;
    --Eighteen: 16px !important;
  }
}
.scrollbar {
  &::-webkit-scrollbar {
    width: 0.3vw;
    height: 0.3vh;
    background: transparent;
    width: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 100px;
    width: 2px;
  }
}
// @layer base {
//   :root {
//     --baseOne: #0a2750;
//     --baseTwo: #1654ac;
//     --baseThree: #dbe8fa;
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(0, 0%, 100%);
//     --accent1: #f4f5f9;
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//     --tweleve: 12px;
//     --sixteen: 16px;
//     --twenty: 20px;
//     --twentyfour: 24px;
//     --thirytwo: 32px;
//     --thirtysix: 36px;
//   }

//   @media (prefers-color-scheme: light) {
//     :root {
//       --baseOne: hsl(229, 57%, 11%);
//       --baseTwo: hwb(243 86% 0%);
//       --baseThree: hsl(228, 56%, 26%);
//       --baseBorder: #aeccf4;
//       --baseFour: hsl(229, 57%, 11%);
//       --accent1: hsl(6, 100%, 80%);
//       --baseFive: #edf3fd;
//       --baseSix: #00000080;
//     }
//   }

//   @media screen and (min-width: 1024px) and (max-width: 1450px) {
//     :root {
//       --tweleve: 10px;
//       --sixteen: 12px;
//       --twenty: 18px;
//       --twentyfour: 20px;
//       --thirytwo: 26px;
//       --thirtysix: 30px;
//     }
//   }

//   :root {
//     --baseOne: #0a2750;
//     --baseTwo: #1654ac;
//     --baseThree: #dbe8fa;
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(0, 0%, 100%);
//     --accent1: #f4f5f9;
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//     --tweleve: 12px;
//     --sixteen: 16px;
//     --twenty: 20px;
//     --twentyfour: 24px;
//     --thirytwo: 32px;
//     --thirtysix: 36px;
//     --PrimaryFontFamily: 'Inter', sans-serif !important;
//     font-family: var(--PrimaryFontFamily) !important;
//   }

//   :root[data-theme='dark'] {
//     --baseOne: hsl(229, 57%, 11%);
//     --baseTwo: hsl(243, 100%, 93%);
//     --baseThree: hsl(228, 56%, 26%);
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(229, 57%, 11%);
//     --accent1: hsl(6, 100%, 80%);
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//   }

//   // :root[data-theme='light'] {
//   //   --baseOne: hsl(0, 0%, 100%);
//   //   --baseTwo: hsl(252, 2%, 51%);
//   //   --baseThree: hsl(0, 0%, 96%);
//   //   --baseBorder: #aeccf4;
//   //   --baseFour: hsl(0, 0%, 100%);
//   //   --accent1: hsl(6, 100%, 80%);
//   //   --baseFive: #edf3fd;
//   //   --baseSix: #00000080;
//   // }

//   :root[data-theme='light'] {
//     --baseOne: #0a2750;
//     --baseTwo: #1654ac;
//     --baseThree: #dbe8fa;
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(0, 0%, 100%);
//     --accent1: #f4f5f9;
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//     --tweleve: 12px;
//     --sixteen: 16px;
//     --twenty: 20px;
//     --twentyfour: 24px;
//     --thirytwo: 32px;
//     --thirtysix: 36px;
//   }

//   :root[data-theme='third'] {
//     --baseOne: hsl(167, 56%, 22%);
//     --baseTwo: hsl(140, 69%, 40%);
//     --baseThree: hsl(0, 0%, 0%);
//     --baseBorder: #aeccf4;
//     --baseFour: hsl(0, 3%, 13%);
//     --accent1: hsl(6, 100%, 80%);
//     --baseFive: #edf3fd;
//     --baseSix: #00000080;
//   }
// }
// .searchbar{
//     @apply bg-baseTwo rounded-searchradius w-searchwidth h-searchheight
// }

@layer components {
  // .btn {
  //   @apply py-2 px-p1 rounded-lg font-medium;
  // }
  // .btn-secondary-c {
  //   @apply text-baseOne bg-baseFive;
  // }
  // .btn-primary-s {
  //   @apply bg-baseOne text-white;
  // }
  // .btn-close {
  //   @apply text-4xl text-red-500 font-light;
  // }
  .form-input {
    @apply border border-gray-300 border-opacity-100 rounded-md text-sm py-3.5 w-w1 px-3;
  }
  .form-label {
    @apply block text-sm font-medium;
  }
  // .project-card {
  //   @apply bg-white rounded-xl w-fit h-auto;
  // }
  // .project-container {
  //   @apply flex justify-center items-center absolute top-0 left-0 bg-baseSix bg-cover h-screen w-screen;
  // }
}