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

:root {
    --primary: #22A699;
    --primary-50: #FFF1F3;
    --primary-100: #e9f6f5;
    --primary-200: #FCCFD6;
    --primary-300: #FAA7B5;
    --primary-400: #F7758F;
    --primary-500: #22A699;
    --primary-600: #DD2C5C;
    --primary-700: #B91747;
    --primary-800: #9B1642;
    --primary-900: #84173E;
    --primary-950: #4A071D;
}

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

.main-container {
    @apply mx-6  max-w-[1440px] 2xl:mx-auto;
}

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