/* RTL Layout Overrides Bootstrap 5 handles most RTL layout flipping automatically when dir="rtl" is on . These rules handle app-specific layout that Bootstrap doesn't cover. */ [dir="rtl"] .sidebar { left: auto; right: 0; } [dir="rtl"] .page { flex-direction: row-reverse; } [dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; } [dir="rtl"] .nav-link i, [dir="rtl"] .btn i { margin-left: 0.25rem; margin-right: 0; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .dropdown-menu-end { left: 0; right: auto; } [dir="rtl"] .btn-group { direction: rtl; } [dir="rtl"] .input-group > :not(:first-child) { border-radius: 0.375rem 0 0 0.375rem; } [dir="rtl"] .input-group > :first-child { border-radius: 0 0.375rem 0.375rem 0; } [dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } /* Breadcrumb separator direction */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\\"; }