body {
  margin: 0;
  padding: 0;
  line-height: normal;
  width: 100%;
  overflow-x: hidden;
}

:root {
  /* Color */
  --color-slateblue: #5452ba;
  --color-mediumseagreen: #00a850;
  --color-orange: #faad19;
  --color-cornflowerblue-200: rgba(38, 148, 224, 0.09);
  --color-cornflowerblue-100: #2694e0;
  --color-steelblue: #006eb9;
  --color-moccasin: #ffe6b6;
  --color-oldlace: #fff6e5;
  --color-darkslategray: #333;
  --color-crimson: #ee212e;
  --color-lavender: #d9e6ff;
  --color-black: #000;
  --color-whitesmoke-200: #ececec;
  --color-whitesmoke-100: #f7f8fb;
  --color-gray: #7f7d7d;
  --color-midnightblue-200: rgba(46, 42, 148, 0.05);
  --color-midnightblue-100: #2e2a94;
  --color-dimgray: #666;

  /* Gap */
  --gap-3: 3px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-28: 28px;

  /* Padding */
  --padding-1: 1px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-11: 11px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-24: 24px;
  --padding-40: 40px;

  /* BorderRadius */
  --br-8: 8px;
  --br-10: 10px;
  --br-12: 12px;
  --br-16: 16px;
  --br-24: 24px;
  --br-26: 26px;

  /* Font */
  --font-inter: Inter;
  --font-lato: Lato;
  --font-butlerpro: ButlerPro;
  --font-poppins: Poppins;
  --font-roboto: Roboto;

  /* FontSize */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-48: 48px;

  /* Figma Variables */

  /* Color */
  --Gray-Border: #ddd;
  --white: #fff;
}

/* Custom Scrollbar Styles - Extra Thin */
/* Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #888, #999);
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #666, #777);
  transform: scale(1.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, #555, #666);
  transform: scale(0.8);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 rgba(0, 0, 0, 0.05);
}

/* Smooth scrolling for all elements */
html {
  scroll-behavior: smooth;
}

/* Enhanced scrollbar for containers with overflow */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #888 rgba(0, 0, 0, 0.05);
}

.scrollable::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollable::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  margin: 1px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
}

.scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #888, #999);
  border-radius: 2px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #666, #777);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: scale(1.2);
}

.scrollable::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, #555, #666);
  transform: scale(0.8);
}

/* Horizontal scroll enhancement for tables and wide content */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #888 rgba(0, 0, 0, 0.05);
}

.horizontal-scroll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.horizontal-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #888, #999);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #666, #777);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}