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

:root {
  --theme-color: #016992;
  --theme-color-red: #BF3127;
  --theme-color-green: #4AA181;
  --theme-color-purple: #7D51B5;
  --font-family-jakarta: 'Plus Jakarta Sans', sans-serif;
}

@layer base {
  body {
    font-family: var(--font-family-jakarta);
  }
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #016992 #DEE2E6;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
  height: 1px;
  width: 15px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #F6F6F6;
  border-radius: 3px;

}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #DEE2E6;
  border-radius: 3px;
  border: none;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #016992;
}

/* Horizontal scrollbar specific styling */
.custom-scrollbar::-webkit-scrollbar:horizontal {
  height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track:horizontal {
  background: #F6F6F6;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
  background: #DEE2E6;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:horizontal:hover {
  background: #222222;
}

/* Ensure scrollbar appears on top for horizontal scrolling */
.custom-scrollbar {
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 13px;

}