@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Black.woff2") format("woff2");
}

:root {
    --site-font-family: "Tajawal", Arial, sans-serif;
    --bs-font-sans-serif: var(--site-font-family);
    --bs-body-font-family: var(--site-font-family);
}

body {
    font-family: var(--site-font-family);
}

.tooltip,
.popover,
.daterangepicker,
.quill-custom .ql-editor > *,
.quill-custom .ql-editor.ql-blank::before,
.quill-custom .ql-snow .ql-tooltip::before,
.quill-custom .ql-snow .ql-tooltip.ql-editing input[type="text"] {
    font-family: var(--site-font-family);
}

.apexcharts-canvas text,
.apexcharts-canvas tspan,
.apexcharts-legend-text,
.apexcharts-tooltip-title,
.apexcharts-tooltip-text,
.apexcharts-xaxistooltip-text,
.apexcharts-yaxistooltip-text {
    font-family: var(--site-font-family) !important;
}

button,
input,
select,
textarea {
    font-family: inherit;
}