:root {
  --gradient1: linear-gradient(90deg, #ffbe0b 0%, #fb5607 48.44%, #3b6cd8 100%);
  --clr1: rgba(0, 0, 0, 0.25);
  --light_gray: rgba(87, 91, 108, 0.85);
  --clr2: #f1f1f1;
  --clr3: #3b6cd8;
  --clr4: rgba(0, 0, 0, 0.75);
  --clr5: #5bc589;
  --clr6: rgba(0, 0, 0, 0.4);
  --clr7: #f5f5f5;
  --black: black;
  --white: white;
  --black: black;
  --dark_black: rgba(0, 0, 0, 0.85);
  --co_light: rgba(0, 0, 0, 0.7);
  --ff_Inter: "Inter", sans-serif;
  --ff_dm: "DM Sans", sans-serif;
  --s8: 8px;
  --s9: 9px;
  --s10: 10px;
  --s11: 11px;
  --s12: 12px;
  --s13: 13px;
  --s14: 14px;
  --s15: 15px;
  --s16: 16px;
  --s17: 17px;
  --s18: 18px;
  --s20: 20px;
  --s22: 22px;
  --s24: 24px;
  --s26: 26px;
  --s28: 28px;
  --s30: 30px;
  --s32: 32px;
}
* {
  -webkit-font-smoothing: antialiased;
  /*letter-spacing: 0.05em;*/
  letter-spacing: 0.1px;
  transition: 0.4s;
}
body {
  font-family: "Inter", sans-serif;
  background-color: var(--clr7);
  color: var(--black);
  letter-spacing: 0.05em;
}
.infoUpdateNotification::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
.leftSection::-webkit-scrollbar {
  width: 0px;
}
.infoUpdateNotification::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3b6cd8, #3b6cd8);
  border: 0px;
  border-radius: 10px;
  height: 1px;
}
.infoUpdateNotification::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    rgb(255 190 11 / 15%),
    rgb(251 86 7 / 15%)
  );
}
a {
  text-decoration: none;
}
*:focus {
  box-shadow: none !important;
}
.bg-gray {
  background-color: var(--clr2);
}
.card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); */
  border-radius: 8px;
  overflow: hidden;
}

@media (min-width: 1600px) {
  :root {
    --s8: 10px;
    --s9: 11px;
    --s10: 14px;
    --s11: 14px;
    --s12: 15px;
    --s13: 16px;
    --s14: 15px;
    --s15: 17px;
    --s16: 20px;
    --s18: 20px;
    --s17: 17px;
    --s20: 24px;
    --s22: 25px;
    --s24: 28px;
    --s26: 27px;
    --s28: 28px;
    --s30: 32px;
    --s32: 36px;
  }
}
@media (min-width: 1700px) {
  :root {
    --s8: 12px;
    --s9: 13px;
    --s10: 15px;
    --s11: 15px;
    --s12: 16px;
    --s13: 18px;
    --s14: 16px;
    --s15: 18px;
    --s16: 18px;
    --s17: 18px;
    --s18: 18px;
    --s20: 26px;
    --s22: 28px;
    --s24: 30px;
    --s26: 28px;
    --s28: 28px;
    --s30: 30px;
    --s32: 36px;
  }
}
@media (min-width: 2100px) {
  :root {
    --s8: 14px;
    --s9: 15px;
    --s10: 17px;
    --s11: 17px;
    --s12: 17px;
    --s13: 20px;
    --s14: 19px;
    --s15: 20px;
    --s16: 23px;
    --s17: 23px;
    --s18: 23px;
    --s20: 27px;
    --s22: 28px;
    --s24: 31px;
    --s26: 30px;
    --s28: 32px;
    --s30: 33px;
    --s32: 37px;
  }
}
@media (min-width: 2400px) {
  :root {
    --s8: 15px;
    --s9: 16px;
    --s10: 18px;
    --s11: 18px;
    --s12: 18px;
    --s13: 22px;
    --s14: 22px;
    --s15: 22px;
    --s16: 24px;
    --s17: 24px;
    --s18: 24px;
    --s20: 28px;
    --s22: 29px;
    --s24: 32px;
    --s26: 32px;
    --s28: 33px;
    --s32: 38px;
  }
}
@media (max-width: 1200px) {
  :root {
    --s8: 8px;
    --s10: 10px;
    --s12: 11px;
    --s14: 13px;
    --s13: 13px;
    --s15: 13px;
    --s16: 14px;
    --s17: 14px;
    --s18: 15px;
    --s20: 16px;
    --s22: 17px;
    --s24: 18px;
    --s26: 25px;
    --s28: 26px;
    --s32: 25px;
  }
}
@media (max-width: 991px) {
  :root {
    --s13: 12px;
  }
}
@media (max-width: 575px) {
  :root {
    --s8: 8px;
    --s10: 10px;
    --s11: 9px;
    --s13: 12px;
    --s12: 12px;
    --s14: 13px;
    --s15: 13px;
    --s16: 13px;
    --s17: 13px;
    --s18: 13px;
    --s20: 13px;
    --s22: 15px;
    --s24: 14px;
    --s26: 18px;
    --s28: 19px;
    --s32: 20px;
  }
}
@media (max-width: 450px) {
  :root {
    --s8: 8px;
    --s10: 10px;
    --s12: 12px;
    --s13: 11px;
    --s14: 12px;
    --s15: 12px;
    --s16: 12px;
    --s17: 12px;
    --s18: 13px;
    --s20: 14px;
    --s24: 14px;
    --s26: 16px;
    --s28: 17px;
    --s32: 18px;
  }
}