:root {
    --app-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.form-control,
.btn,
table,
.navbar,
.side-navbar,
.dropdown-menu,
.modal,
.dataTables_wrapper,
.bootstrap-select .dropdown-toggle {
    font-family: var(--app-font) !important;
}

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-control {
    text-align: right;
}

html[dir="rtl"] .dataTables_filter {
    text-align: left;
}

html[dir="rtl"] .dataTables_length {
    text-align: right;
}