:root {

  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Open Sans", Ubuntu, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";


  /* --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Open Sans", Ubuntu, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */

  --gradient_1: linear-gradient(-30deg, var(--cyan-100) -50%, var(--blue-100) 50%);
  --gradient_2: linear-gradient(-30deg, var(--pink-100) -50%, var(--orange-100) 50%);
  --transparent: transparent;
  --ghostwhite: #EEF1F7;
  --bs-primary: #1F71E9;
  --bs-blue: #1f71e9;
  --bs-purple: #6f42c1;
  --pink: #d63384;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #198754;
  --teal: #20c997;
  --cyan: #0dcaf0;
  --blue-100: #cfe2ff;
  --blue-200: #9ec5fe;
  --blue-300: #6ea8fe;
  --blue-400: #3d8bfd;
  --blue-500: #0d6efd;
  --blue-600: #0a58ca;
  --blue-700: #084298;
  --blue-800: #052c65;
  --blue-900: #031633;
  --purple-100: #e2d9f3;
  --purple-200: #c5b3e6;
  --purple-300: #a98eda;
  --purple-400: #8c68cd;
  --purple-500: #6f42c1;
  --purple-600: #59359a;
  --purple-700: #432874;
  --purple-800: #2c1a4d;
  --purple-900: #160d27;
  --red-100: #f8d7da;
  --red-200: #f1aeb5;
  --red-300: #ea868f;
  --red-400: #e35d6a;
  --red-500: #dc3545;
  --red-600: #b02a37;
  --red-700: #842029;
  --red-800: #58151c;
  --red-900: #2c0b0e;
  --pink-100: #f7d6e6;
  --pink-200: #efadce;
  --pink-300: #e685b5;
  --pink-400: #de5c9d;
  --pink-500: #d63384;
  --pink-600: #ab296a;
  --pink-700: #801f4f;
  --pink-800: #561435;
  --pink-900: #2b0a1a;
  --orange-100: #ffe5d0;
  --orange-200: #fecba1;
  --orange-300: #feb272;
  --orange-400: #fd9843;
  --orange-500: #fd7e14;
  --orange-600: #ca6510;
  --orange-700: #984c0c;
  --orange-800: #653208;
  --orange-900: #331904;
  --yellow-100: #fff3cd;
  --yellow-200: #ffe69c;
  --yellow-300: #ffda6a;
  --yellow-400: #ffcd39;
  --yellow-500: #ffc107;
  --yellow-600: #cc9a06;
  --yellow-700: #997404;
  --yellow-800: #664d03;
  --yellow-900: #332701;
  --green-100: #d1e7dd;
  --green-200: #a3cfbb;
  --green-300: #75b798;
  --green-400: #479f76;
  --green-500: #198754;
  --green-600: #146c43;
  --green-700: #0f5132;
  --green-800: #0a3622;
  --green-900: #051b11;
  --teal-100: #d2f4ea;
  --teal-200: #a6e9d5;
  --teal-300: #79dfc1;
  --teal-400: #4dd4ac;
  --teal-500: #20c997;
  --teal-600: #1aa179;
  --teal-700: #13795b;
  --teal-800: #0d503c;
  --teal-900: #06281e;
  --cyan-100: #cff4fc;
  --cyan-200: #9eeaf9;
  --cyan-300: #6edff6;
  --cyan-400: #3dd5f3;
  --cyan-500: #0dcaf0;
  --cyan-600: #0aa2c0;
  --cyan-700: #087990;
  --cyan-800: #055160;
  --cyan-900: #032830;

  --white-100: rgb(255 255 255 / 10%);
  --white-200: rgb(255 255 255 / 20%);
  --white-300: rgb(255 255 255 / 30%);
  --white-400: rgb(255 255 255 / 40%);
  --white-500: rgb(255 255 255 / 50%);
  --white-600: rgb(255 255 255 / 60%);
  --white-700: rgb(255 255 255 / 70%);
  --white-800: rgb(255 255 255 / 80%);
  --white-900: rgb(255 255 255 / 90%);
  --white-1000: rgb(255 255 255 / 100%);

  --dark-100: rgb(0 0 0 / 10%);
  --dark-200: rgb(0 0 0 / 20%);
  --dark-300: rgb(0 0 0 / 30%);
  --dark-400: rgb(0 0 0 / 40%);
  --dark-500: rgb(0 0 0 / 50%);
  --dark-600: rgb(0 0 0 / 60%);
  --dark-700: rgb(0 0 0 / 70%);
  --dark-800: rgb(0 0 0 / 80%);
  --dark-900: rgb(0 0 0 / 90%);
  --dark-1000: rgb(0 0 0 / 100%);


  
  /* scrollbar color */
  --scrollbar-border: var(--bs-white);
  --scrollbar-bg: #858fa1;
  --scrollbar-bghover: #9fa8b9;
  --scrollbar-thumb: #00000035;
  --scrollbar-hover: #00000050;
  --scrollbar-active: #00000070;
  /* cell select and hover */
  --cell-green: #a7edba;
  --cell-yellow: #efeb71;
  --cell-red: #eda7a7;
  /* dropdown color */
  --dd-color: var(--bs-dark);
  --dd-hvrbg: var(--blue-100);
  --dd-hvrclr: var(--bs-primary);
  --dd-actbg: var(--bs-primary);
  --dd-actclr: var(--bs-white);
  /* form input, dropdown color */
  --inputHeightSm: 30px;
  --inputHeight: 36px;
  --inputHeightLg: 50px;
  --input-bg: var(--bs-light);
  --input-border: var(--bs-gray);
  --input-fcsbg: var(--blue-100);
  --input-fcsborder: var(--bs-blue-800);
  --input-disbg: var(--bs-gray);
  --input-discolor: var(--bs-secondary);
  --input-disborder: var(--bs-gray-200);
  --dropdown-bg: var(--bs-gray-100);
  --dropdown-border: var(--bs-gray-200);
  --inputDropdown-hvrbg: var(--blue-100);
  --inputDropdown-hvrborder: var(--blue-100);
  --inputDropdown-hvrcolor: var(--bs-primary);
  --inputDropdown-sltbg: var(--bs-primary);
  --inputDropdown-sltborder: var(--bs-primary);
  --inputDropdown-sltcolor: var(--bs-white);
  
  --bs-body-font-size: 14px;
  

  /* on contrast */
  
  /* cell select and hover */
  --bs-primarylight-con: #e7e7fa;
  --ch-con-color: var(--white);
  --ch-con-border: #7e7596;
  --ch-con-bg: #574e73;
  --cs-con-color: var(--white);
  --cs-con-border: #7e7596;
  --cs-con-bg: #574e73;
  /* scrollbar */
  /* --scrollbar-con-bg: #d3cee2;
  --scrollbar-con-bghover: #b5adcd; */

  --kot-bg-0: var(--yellow-100);
  --kot-bg-1: var(--orange-100);
  --kot-bg-2: var(--red-100);
  --kot-bg-3: var(--purple-100);
  --kot-bg-4: var(--blue-100);
  --kot-bg-5: var(--cyan-100);
  --kot-bg-6: var(--green-100);
  --kot-bg-7: #e8f7d4;
  --kot-bg-8: #e7e7cc;
}


.DEFAULTCLR {
  background-color: var(--bs-primary);
}
.GREEN {
  background-color: var(--bs-green);
}
.BLUE {
  background-color: var(--bs-blue);
}
.YELLOW {
  background-color: var(--bs-yellow);
}
.ORANGE {
  background-color: var(--bs-orange);
}

.gradient_1{
  background: var(--gradient_1);
}
.gradient_2{
  background: var(--gradient_2);
}