/*
* Custom css
******************************************************************************/

/* Fateel brand typeface — Frutiger LT Arabic */
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/fateel/FrutigerLTArabic45Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/fateel/FrutigerLTArabic55Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Frutiger LT Arabic';
    src: url('/fonts/fateel/FrutigerLTArabic65Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: 'Frutiger LT Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    --bs-body-font-family: 'Frutiger LT Arabic', 'Tajawal', sans-serif !important;
}

html,
body,
.menu,
.menu-item,
.menu-link,
.btn,
input,
select,
textarea,
.form-control,
h1, h2, h3, h4, h5, h6,
.card,
.table,
.dropdown-menu,
.modal,
.tooltip,
.popover {
    font-family: 'Frutiger LT Arabic', 'Tajawal', sans-serif !important;
}

.tag__container {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;       /* 4px 8px */
    border-radius: 0.75rem;       /* 12px */
    font-size: 0.875rem;          /* 14px */
    font-weight: 500;
    line-height: 1;
}

.tag-yellow {
    background-color: #FFF9C4;   /* light yellow */
    color: #FBC02D;              /* dark yellow text/icon */
}

.tag-red {
    background-color: #FFCDD2;  /* light red */
    color:            #C62828;  /* dark red text/icon */
}

.tag-green {
    background-color: #C8E6C9;  /* light green */
    color:            #2E7D32;  /* dark green text/icon */
}

.tag-blue {
    background-color: #BBDEFB;  /* light blue */
    color:            #1565C0;  /* dark blue text/icon */
}

.tag-gray {
    background-color: #ECEFF1;  /* light gray */
    color:            #455A64;  /* dark gray text/icon */
}

.tag-orange {
    background-color: #FFE0B2;  /* light orange */
    color:            #EF6C00;  /* dark orange text/icon */
}

.tag-purple {
    background-color: #E1BEE7;  /* light purple */
    color:            #6A1B9A;  /* dark purple text/icon */
}

.tag__container .size-24 {
    font-size: 1.5rem;           /* 24px */
    width: 1.5rem;
    height: 1.5rem;
}

.tag__text {
    margin-left: 0.25rem;         /* 4px spacing between icon & text */
}