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

:root {
    --primary: #ef6d25;
    --primary-50: #fdf0e9;
    --primary-100: #fce2d3;
    --primary-200: #f9c5a8;
    --primary-300: #f5a77c;
    --primary-400: #f28a51;
    --primary-500: #ef6d25;
    --primary-600: #d76221;
    --primary-700: #bf571e;
    --primary-800: #a74c1a;
    --primary-900: #8f4116;
    --primary-950: #783713;
}

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-10 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;
}