/* ***************************************************** ** RTL (Right-to-Left) Arabic Stylesheet ** Overrides Bootstrap 4 and theme styles for RTL layout. Applied when is set. ***************************************************** */ /* ===================================================== 1. GLOBAL DIRECTION & TYPOGRAPHY ===================================================== */ html[dir="rtl"] { direction: rtl; text-align: right; } html[dir="rtl"] body { text-align: right; font-family: 'Tajawal', 'Open Sans', sans-serif; } /* ===================================================== 2. BOOTSTRAP MARGIN UTILITIES (mr <-> ml) ===================================================== */ /* mr-auto -> ml-auto */ html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* ml-auto -> mr-auto */ html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* mr-1 */ html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } /* mr-2 */ html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* mr-3 */ html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } /* mr-4 */ html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } /* mr-5 */ html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } /* ml-1 */ html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } /* ml-2 */ html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } /* ml-3 */ html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } /* ml-4 */ html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } /* ml-5 */ html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } /* Responsive ml/mr (md breakpoint) */ html[dir="rtl"] .ml-md-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } /* ===================================================== 3. BOOTSTRAP PADDING UTILITIES (pr <-> pl) ===================================================== */ /* pr-1 */ html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } /* pr-2 */ html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } /* pr-3 */ html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } /* pr-4 */ html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* pl-1 */ html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } /* pl-2 */ html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } /* pl-3 */ html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } /* pl-4 */ html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } /* ===================================================== 4. BOOTSTRAP FLOAT UTILITIES ===================================================== */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } html[dir="rtl"] .float-lg-left { float: right !important; } html[dir="rtl"] .float-lg-right { float: left !important; } html[dir="rtl"] .float-md-right { float: left !important; } html[dir="rtl"] .float-md-left { float: right !important; } /* ===================================================== 5. BOOTSTRAP TEXT ALIGNMENT ===================================================== */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .text-md-left { text-align: right !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } html[dir="rtl"] .text-lg-left { text-align: right !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; }html[dir="rtl"] .input-group > .form-control, html[dir="rtl"] .input-group > .custom-select { text-align: right; } html[dir="rtl"] .input-group > .form-control:not(:last-child), html[dir="rtl"] .input-group > .custom-select:not(:last-child) { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .input-group > .form-control:not(:first-child), html[dir="rtl"] .input-group > .custom-select:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem; } html[dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } html[dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } html[dir="rtl"] .input-group-prepend .btn, html[dir="rtl"] .input-group-prepend .input-group-text { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .input-group-append .btn, html[dir="rtl"] .input-group-append .input-group-text { border-radius: 0.25rem 0 0 0.25rem; } /* ===================================================== 7. BOOTSTRAP DROPDOWN MENUS ===================================================== */ html[dir="rtl"] .dropdown-menu { text-align: right; right: 0; left: auto; } html[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } html[dir="rtl"] .dropdown-item { text-align: right; } /* ===================================================== 8. BOOTSTRAP BREADCRUMB ===================================================== */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.6em; padding-left: 0.5rem; padding-right: 0.5rem; float: right; } html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0.5rem; } /* ===================================================== 9. BOOTSTRAP NAVBAR ===================================================== */ html[dir="rtl"] .navbar-nav { padding-right: 0; } html[dir="rtl"] .navbar-nav .dropdown-menu { text-align: right; } html[dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; } /* ===================================================== 10. BOOTSTRAP LISTS ===================================================== */ html[dir="rtl"] .list-group { padding-right: 0; } html[dir="rtl"] .list-unstyled, html[dir="rtl"] .list-inline { padding-right: 0; } html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 2rem; padding-left: 0; } /* ===================================================== 11. BOOTSTRAP MODAL ===================================================== */ html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; padding: 1rem; } html[dir="rtl"] .modal-footer > :not(:first-child) { margin-left: 0; margin-right: .25rem; } html[dir="rtl"] .modal-footer > :not(:last-child) { margin-right: 0; margin-left: .25rem; } /* ===================================================== 12. BOOTSTRAP FORMS ===================================================== */ html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; } html[dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; } html[dir="rtl"] .form-check-label { margin-right: 0; } html[dir="rtl"] label { text-align: right; } html[dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; } html[dir="rtl"] .custom-control-label::before, html[dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; } html[dir="rtl"] .custom-select { background-position: left 0.75rem center; padding-left: 1.75rem; padding-right: 0.75rem; } /* ===================================================== 13. BOOTSTRAP TABLES ===================================================== */ html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; } /* ===================================================== 14. BOOTSTRAP CARDS ===================================================== */ html[dir="rtl"] .card-body { text-align: right; } html[dir="rtl"] .card-header { text-align: right; } /* ===================================================== 15. BOOTSTRAP BADGE ===================================================== */ html[dir="rtl"] .badge { margin-left: 0; margin-right: 0.25rem; } /* ===================================================== 16. BOOTSTRAP CLOSE BUTTON ===================================================== */ html[dir="rtl"] .close { float: left; }html[dir="rtl"] .topbar .btn-group { direction: rtl; }/* Main Navbar */ html[dir="rtl"] .main-navbar-wrapper .navbar-collapse { text-align: right; } /* Sidebar */ html[dir="rtl"] .sidebar .list-group-item { text-align: right; } html[dir="rtl"] .sidebar .card-minimise { float: left !important; } html[dir="rtl"] .sidebar .badge.float-right { float: left !important; } /* Main content layout - flip sidebar and content */ html[dir="rtl"] .primary-content { text-align: right; }/* Client alerts */ html[dir="rtl"] .client-alerts li a { text-align: right; } html[dir="rtl"] .client-alerts li a i { margin-left: 0.5rem; margin-right: 0; } /* Footer */ html[dir="rtl"] #footer .nav { padding-right: 0; } html[dir="rtl"] #footer .copyright { text-align: right; } /* Pagination */ html[dir="rtl"] .pagination { padding-right: 0; } html[dir="rtl"] .page-item:first-child .page-link { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .page-item:last-child .page-link { border-radius: 0.25rem 0 0 0.25rem; }/* Alerts */ html[dir="rtl"] .alert { text-align: right; } html[dir="rtl"] .alert-dismissible .close { left: 0; right: auto; } /* Invoice / Quote tables */ html[dir="rtl"] .total-row.text-right { text-align: left !important; } /* Ticket system */ html[dir="rtl"] .ticket-reply { text-align: right; } /* Panel / Card headers icons */ html[dir="rtl"] .card-header i.fas, html[dir="rtl"] .card-header i.far, html[dir="rtl"] .card-header i.fal, html[dir="rtl"] .card-header i.fad { margin-left: 0.5rem; margin-right: 0; } /* Status labels */ html[dir="rtl"] .label { margin-left: 0; } /* Btn group */ html[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .btn-group > .btn:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem; } /* Font Awesome icons spacing fix */ html[dir="rtl"] i.fas + span, html[dir="rtl"] i.far + span, html[dir="rtl"] i.fal + span, html[dir="rtl"] i.fad + span { margin-right: 0.25rem; } /* ===================================================== 18. RESPONSIVE OVERRIDES ===================================================== */ @media (min-width: 576px) { html[dir="rtl"] .float-sm-left { float: right !important; } html[dir="rtl"] .float-sm-right { float: left !important; } } @media (min-width: 768px) { html[dir="rtl"] .text-md-left { text-align: right !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } } @media (min-width: 992px) { html[dir="rtl"] .text-lg-left { text-align: right !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; } } @media (min-width: 1200px) { html[dir="rtl"] .text-xl-left { text-align: right !important; } html[dir="rtl"] .text-xl-right { text-align: left !important; } } /* ===================================================== 19. OFFSET CLASSES ===================================================== */ html[dir="rtl"] .offset-1 { margin-right: 8.333333%; margin-left: 0; } html[dir="rtl"] .offset-2 { margin-right: 16.666667%; margin-left: 0; } html[dir="rtl"] .offset-3 { margin-right: 25%; margin-left: 0; } html[dir="rtl"] .offset-md-0 { margin-right: 0; } /* ===================================================== 20. MISC FIXES ===================================================== */ /* Tooltip arrow */ html[dir="rtl"] .tooltip { direction: rtl; } /* Popover */ html[dir="rtl"] .popover { text-align: right; } /* DataTable sorting arrows */ html[dir="rtl"] table.dataTable thead .sorting::after, html[dir="rtl"] table.dataTable thead .sorting_asc::after, html[dir="rtl"] table.dataTable thead .sorting_desc::after { left: 8px; right: auto; } /* Search input in header */ html[dir="rtl"] .header .search .form-control { text-align: right; } /* Toast messages */ html[dir="rtl"] .toast { text-align: right; } /* Tab navigation */ html[dir="rtl"] .nav-tabs { padding-right: 0; } /* Back to admin button fixed */ html[dir="rtl"] .btn-return-to-admin { left: 15px; right: auto; } /* Login form */ html[dir="rtl"] .login-container .form-group { text-align: right; } /* Shopping cart */ html[dir="rtl"] #order-standard_cart .order-summary { text-align: right; } /* Accordion */ html[dir="rtl"] .accordion .card-header .btn { text-align: right; } /* Fix font awesome chevron for RTL in breadcrumb */ html[dir="rtl"] .fa-chevron-right:before { content: "\f053"; } html[dir="rtl"] .fa-chevron-left:before { content: "\f054"; }html[dir="rtl"] .navbar-brand { margin-right: 0 !important; margin-left: 1.5rem !important; } html[dir="rtl"] .cart-btn { margin-left: 0 !important; margin-right: 1.5rem !important; }html[dir="rtl"] .input-group-prepend .input-group-text { border-radius: 0 0.25rem 0.25rem 0 !important; border-left: 0 !important; border-right: 1px solid #ced4da !important; } html[dir="rtl"] .input-group-append .input-group-text, html[dir="rtl"] .input-group-append .btn { border-radius: 0.25rem 0 0 0.25rem !important; border-right: 0 !important; border-left: 1px solid #ced4da !important; } html[dir="rtl"] .input-group .form-control { border-radius: 0 !important; text-align: right; } html[dir="rtl"] .input-group > .form-control:not(:last-child) { border-radius: 0 0.25rem 0.25rem 0 !important; } html[dir="rtl"] .input-group > .form-control:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem !important; } /* --- 3. Dropdown Arrows --- */ html[dir="rtl"] .dropdown-toggle::after { margin-right: .255em !important; margin-left: 0 !important; } /* --- 4. Breadcrumb Separator --- */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\f053" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; float: none !important; display: inline-block !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* --- 5. Sidebar & Button Icon Spacing --- */ html[dir="rtl"] .sidebar .list-group-item i, html[dir="rtl"] .sidebar .list-group-item .fas, html[dir="rtl"] .sidebar .list-group-item .far, html[dir="rtl"] .btn i, html[dir="rtl"] .btn .fas, html[dir="rtl"] .btn .far { margin-left: 8px !important; margin-right: 0 !important; } /* --- 6. Remember Me Checkbox Alignment --- */ html[dir="rtl"] .form-check-input { margin-left: 0.5rem !important; margin-right: 0 !important; float: right !important; position: static !important; } html[dir="rtl"] .form-check { padding-right: 1.5rem !important; padding-left: 0 !important; text-align: right !important; display: flex; align-items: center; } /* --- 7. Button Arrows Direction --- */ html[dir="rtl"] .fa-arrow-right:before, html[dir="rtl"] .fa-arrow-circle-right:before, html[dir="rtl"] .fa-long-arrow-alt-right:before { transform: scaleX(-1); display: inline-block; } /* ===================================================== 22. REGISTRATION PAGE FIXES ===================================================== */ /* Fix input field background icons overlapping text */ html[dir="rtl"] .field.form-control, html[dir="rtl"] .form-control.field { padding-right: 45px !important; padding-left: 12px !important; background-position: right 15px center !important; } /* Fix Intl-Tel-Input (Phone Flag) Positioning */ html[dir="rtl"] .iti--allow-dropdown input, html[dir="rtl"] .iti--separate-dial-code input { padding-right: 85px !important; padding-left: 10px !important; } html[dir="rtl"] .iti__flag-container { right: 0 !important; left: auto !important; direction: ltr; } /* Password Strength Meter Alignment */ html[dir="rtl"] .password-strength-meter, html[dir="rtl"] .password-strength-text { text-align: right !important; } /* Registration Page Sidebar Icons */ html[dir="rtl"] #Primary_Sidebar-Already_Registered-Login .list-group-item i, html[dir="rtl"] #Primary_Sidebar-Already_Registered-Lost_Password_Reset .list-group-item i { margin-left: 10px !important; margin-right: 0 !important; } /* Terms of Service Checkbox Container Override */ html[dir="rtl"] .form-check label { margin-right: 0.5rem; }