html[dir="rtl"],
body[dir="rtl"],
:root[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body,
body[dir="rtl"] {
    text-align: right;
    font-family: var(--tf-font-family-ar);
}

[dir="rtl"] .tf-action-bar,
[dir="rtl"] .tf-btn-group-responsive,
[dir="rtl"] .tf-form-row,
[dir="rtl"] .tf-page-header,
[dir="rtl"] .tf-card-header,
[dir="rtl"] .tf-table-actions {
    direction: rtl;
}

[dir="rtl"] .tf-navbar-link,
[dir="rtl"] .tf-stat-card {
    text-align: right;
}

[dir="rtl"] .tf-table,
[dir="rtl"] .tf-table-data {
    text-align: right;
}