@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('cairo/cairo-200.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('cairo/cairo-300.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('cairo/cairo-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('cairo/cairo-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('cairo/cairo-600.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('cairo/cairo-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('cairo/cairo-800.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('cairo/cairo-900.ttf') format('truetype');
}

:root {
    --font-family-sans-serif: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --bs-font-sans-serif: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, span, label, div, li, a, button,
input, select, textarea, option,
table, th, td,
.btn, .form-control, .input-group,
.navbar, .content-wrapper,
.main-footer, .box, .box-title, .box-body,
.modal, .modal-title, .modal-body,
.dropdown-menu, .nav, .nav-link,
.select2-container, .select2-selection, .select2-results,
.flatpickr-calendar, .swal2-popup,
.cairo-font {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Do not let Cairo override icon fonts */
.fa,
.sidebar-toggle,
.sidebar-toggle::before,
.glyphicon {
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-style: normal !important;
}

.fas,
.fa-solid {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.far,
.fa-regular {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-family: 'Font Awesome 5 Brands', 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

.ion {
    font-family: 'Ionicons' !important;
}