@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: #ffffff;
    --primary-50: #ffffff;
    --primary-100: #ffffff;
    --primary-200: #ffffff;
    --primary-300: #ffffff;
    --primary-400: #ffffff;
    --primary-500: #ffffff;
    --primary-600: #ffffff;
    --primary-700: #ffffff;
    --primary-800: #ffffff;
    --primary-900: #ffffff;
    --primary-950: #ffffff;
}

body {
    font-family: "Roboto", sans-serif;
}

.main-container {
    @apply px-4 md:px-8 lg:px-16;
}

.pagination-container {
    @apply flex items-center justify-center gap-[10px] flex-wrap;
}

.paginate-buttons {
    @apply border text-slate-500 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer rounded-[10px] border-slate-200 justify-center items-center flex hover:bg-primary-100;
}

.active-page {
    @apply bg-primary text-white border-primary hover:bg-primary;
}

.vs__dropdown-toggle {
    padding: 9px 6px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
}