@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  :root {
    --color-primary: #36558d;
    --color-secondary: #d8bc96;
    --color-third: #d7a628;
    --color-forth: #f0f8ff;
    --color-fifth: #51A4DA;
    --color-sixth: #D8BC96;
    --color-seventh: #fcfcfd;
    --color-eighth: #1570EF;
    --color-ninth: #969696;
    --color-tenth: #161C4C;
  }
}

@font-face {
  font-family: "JF Flat Bold";
  src: url("../fonts/arfonts-jf-flat-bold/jf-flat-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Arial";
  src: url("../fonts/DG_agnadeen/DGAgnadeen-Regular.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "JF Flat Bold", "Arial", "DG Agnadeen", sans-serif;
  background-color: #f5f5f5;
}

/* Custom scrollbar styling with primary color */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a4270;
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1f1f1;
}

.ts-control{
  padding: 15px !important;
  border-radius: 10px !important;
  outline: none !important;
}

.ts-control input{
  padding: 15px !important;
}

.ts-control .item{
  padding: 5px !important;
}

.ts-dropdown .option {
  padding: 15px !important;
}