/* ========================================================================= RTL adjustments ========================================================================= Loaded only for right to left locales, on top of the shared UI and direction.css. The document direction itself comes from the dir attribute on , which is rendered from the active locale. This file only mirrors what the underlying Bootstrap 4 based theme hard codes to a physical side. Everything is scoped to [dir="rtl"] so that nothing here can leak into the LTR interface. ========================================================================= */ /* ------------------------------------------------------------------------- Bootstrap 4 physical utilities The theme and the views use the framework's physical helpers in hundreds of places. Flipping them centrally is what keeps a single set of templates working in both directions. ------------------------------------------------------------------------- */ [dir="rtl"] .pull-left, [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .pull-right, [dir="rtl"] .float-right { float: left !important; } [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; } [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; } [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* ------------------------------------------------------------------------- Page shell: sidebar, content offset, header ------------------------------------------------------------------------- */ [dir="rtl"] p, [dir="rtl"] ul, [dir="rtl"] ol { text-align: right; } [dir="rtl"] .sidebar-menu, [dir="rtl"] .page-title-area:before { left: auto; right: 0; } [dir="rtl"] .page-container { padding-left: 0; padding-right: 280px; } [dir="rtl"] .sbar_collapsed.page-container { padding-right: 0; } [dir="rtl"] .sbar_collapsed .sidebar-menu { right: -280px; } [dir="rtl"] .nav-btn { margin: 10px 0 0 30px; } [dir="rtl"] .header-title, [dir="rtl"] .page-title { text-align: right; } [dir="rtl"] .page-title { margin-right: 0; margin-left: 30px; } [dir="rtl"] .footer-area p { text-align: center; } [dir="rtl"] .user-profile img.avatar { margin-right: 0; margin-left: 20px; } [dir="rtl"] .notification-area .dropdown-menu, [dir="rtl"] .user-profile .dropdown-menu { left: 0 !important; right: auto !important; } /* ------------------------------------------------------------------------- Sidebar navigation (metisMenu) ------------------------------------------------------------------------- */ [dir="rtl"] .metismenu li a { padding-right: 30px; padding-left: 15px; text-align: right; } [dir="rtl"] .metismenu li a i { margin-right: 0; margin-left: 10px; } [dir="rtl"] .metismenu .has-arrow:after { right: auto; left: 1em; transform: rotate(-45deg); } [dir="rtl"] .metismenu ul a { padding-right: 45px; padding-left: 15px; } [dir="rtl"] .slicknav_nav, [dir="rtl"] .slicknav_menu { text-align: right; } [dir="rtl"] .slicknav_btn { float: left; } /* ------------------------------------------------------------------------- Breadcrumbs The separator is a directional element and is mirrored with the layout. ------------------------------------------------------------------------- */ [dir="rtl"] .breadcrumbs li a:before { right: auto; left: -13px; transform: scaleX(-1); } [dir="rtl"] .breadcrumbs li a, [dir="rtl"] .breadcrumbs li span { margin-right: 0; margin-left: 20px; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item:before { padding-right: 0; padding-left: .5rem; float: right; } /* ------------------------------------------------------------------------- Cards, alerts, dashboard boxes ------------------------------------------------------------------------- */ [dir="rtl"] .card, [dir="rtl"] .alert { text-align: right; } [dir="rtl"] .alert { margin: 10px 0; } [dir="rtl"] .alert-warning { border-left: none; border-right: 5px solid #e4b82c; } [dir="rtl"] .alert-danger { border-left: none; border-right: 5px solid red; } [dir="rtl"] .alert-success { border-left: none; border-right: 5px solid #319a31; } [dir="rtl"] .alert-dismissible { padding-right: 1.25rem; padding-left: 4rem; } [dir="rtl"] .alert-dismissible .close { right: auto; left: 0; } [dir="rtl"] body > .alert.alert-warning { margin-left: 0 !important; margin-right: 315px !important; } [dir="rtl"] .seofct-icon i { margin-right: 0; margin-left: 20px; } [dir="rtl"] .dash-content { padding-right: 20px; padding-left: 0; } [dir="rtl"] .dsh-box-style .add-new { right: auto; left: 10px; } [dir="rtl"] .dsh-box-style .content { margin-left: 0; margin-right: 20px; } [dir="rtl"] .widget-area-header .widget-area-expand { right: auto; left: 20px; } [dir="rtl"] .widget-handler .remove-widget { right: auto; left: 10px; } [dir="rtl"] .widget-handler .expand { right: auto; left: 40px; } [dir="rtl"] .dd-item .remove_item { right: auto !important; left: 10px; } [dir="rtl"] .dd-item .expand { right: auto !important; left: 36px; } /* ------------------------------------------------------------------------- Forms and input groups ------------------------------------------------------------------------- */ [dir="rtl"] .form-group, [dir="rtl"] .form-check, [dir="rtl"] label { text-align: right; } [dir="rtl"] select.form-control:not([size]):not([multiple]) { padding-right: 25px; padding-left: 8px; } [dir="rtl"] .form-check-input, [dir="rtl"] .custom-control { margin-right: 0; margin-left: 1.25rem; } [dir="rtl"] .custom-control { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .custom-control-label:before, [dir="rtl"] .custom-control-label:after { right: -1.5rem; left: auto; } [dir="rtl"] .input-group > .form-control:not(:last-child), [dir="rtl"] .input-group > .custom-select:not(:last-child) { border-radius: 0 .25rem .25rem 0; } [dir="rtl"] .input-group > .form-control:not(:first-child), [dir="rtl"] .input-group > .custom-select:not(:first-child) { border-radius: .25rem 0 0 .25rem; } [dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } [dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } [dir="rtl"] .input-group > .input-group-prepend > .btn, [dir="rtl"] .input-group > .input-group-prepend > .input-group-text { border-radius: 0 .25rem .25rem 0; } [dir="rtl"] .input-group > .input-group-append > .btn, [dir="rtl"] .input-group > .input-group-append > .input-group-text { border-radius: .25rem 0 0 .25rem; } [dir="rtl"] .custom-file-label:after { right: auto; left: 0; border-radius: .25rem 0 0 .25rem; } [dir="rtl"] .custom-switch .custom-control-label:after { right: calc(-2.25rem + 2px); left: auto; } [dir="rtl"] .custom-switch .custom-control-input:checked ~ .custom-control-label:after { transform: translateX(-.75rem); } /* ------------------------------------------------------------------------- Dropdowns ------------------------------------------------------------------------- */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } [dir="rtl"] .dropdown-toggle:after { margin-right: .255em; margin-left: 0; } [dir="rtl"] .nice-select { text-align: right !important; } [dir="rtl"] .nice-select:after { right: auto; left: 12px; } [dir="rtl"] .nice-select .list { right: 0; left: auto; } [dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow { right: auto; left: 3px; } /* ------------------------------------------------------------------------- Modals ------------------------------------------------------------------------- */ [dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; } [dir="rtl"] .modal-footer { justify-content: flex-start; } [dir="rtl"] .modal-footer button:first-child { margin-left: 10px; } [dir="rtl"] .modal-title, [dir="rtl"] .modal-body { text-align: right; } /* ------------------------------------------------------------------------- Tables and DataTables ------------------------------------------------------------------------- */ [dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; } [dir="rtl"] .table th.text-center, [dir="rtl"] .table td.text-center { text-align: center !important; } [dir="rtl"] .dataTables_wrapper .dataTables_length, [dir="rtl"] .dataTables_wrapper .dataTables_info { float: right !important; text-align: right; } [dir="rtl"] .dataTables_wrapper .dataTables_filter, [dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: left !important; text-align: left; } [dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-right: .5em; margin-left: 0; } [dir="rtl"] table.dataTable thead th { padding-right: 18px; padding-left: 30px; } [dir="rtl"] table.dataTable thead .sorting:after, [dir="rtl"] table.dataTable thead .sorting_asc:after, [dir="rtl"] table.dataTable thead .sorting_desc:after { right: auto; left: 8px; } /* ------------------------------------------------------------------------- Pagination Labels stay semantic; only the visual order is mirrored. ------------------------------------------------------------------------- */ [dir="rtl"] .pagination { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .page-item:first-child .page-link { border-radius: 0 .25rem .25rem 0; } [dir="rtl"] .page-item:last-child .page-link { border-radius: .25rem 0 0 .25rem; } /* ------------------------------------------------------------------------- Buttons and button groups ------------------------------------------------------------------------- */ [dir="rtl"] .btn i + span, [dir="rtl"] .btn i { margin-right: 0; } [dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-radius: 0 .25rem .25rem 0; } [dir="rtl"] .btn-group > .btn:not(:first-child) { border-radius: .25rem 0 0 .25rem; } /* ------------------------------------------------------------------------- Notifications: toastr and SweetAlert ------------------------------------------------------------------------- */ [dir="rtl"] #toast-container > div { direction: rtl; text-align: right; padding: 15px 50px 15px 15px; background-position: right 15px center; } [dir="rtl"] #toast-container.toast-top-right, [dir="rtl"] #toast-container.toast-bottom-right { right: auto; left: 12px; } [dir="rtl"] .toast-close-button { float: left; } [dir="rtl"] .swal2-popup, [dir="rtl"] .swal2-title, [dir="rtl"] .swal2-html-container { direction: rtl; text-align: right; } [dir="rtl"] .swal2-actions { flex-direction: row-reverse; } /* ------------------------------------------------------------------------- Editors, pickers, calendars and charts ------------------------------------------------------------------------- */ [dir="rtl"] .note-editor .note-toolbar, [dir="rtl"] .note-editor .note-editing-area .note-editable { direction: rtl; text-align: right; } [dir="rtl"] .note-editor .note-btn-group { float: right; } [dir="rtl"] .datepicker, [dir="rtl"] .datepicker table, [dir="rtl"] .ui-datepicker { direction: rtl; } [dir="rtl"] .datepicker .prev, [dir="rtl"] .datepicker .next { transform: scaleX(-1); } /* Dates, times and numeric axes keep a stable left to right reading. */ [dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"], [dir="rtl"] input[type="datetime-local"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } [dir="rtl"] .fc, [dir="rtl"] .fc-toolbar { direction: rtl; } [dir="rtl"] .fc .fc-toolbar-chunk { direction: rtl; } [dir="rtl"] .fc-icon-chevron-left, [dir="rtl"] .fc-icon-chevron-right { transform: scaleX(-1); } /* Charts and canvases are rendered by their libraries and must not inherit a mirrored coordinate system. */ [dir="rtl"] canvas, [dir="rtl"] .chart-container { direction: ltr; } /* ------------------------------------------------------------------------- Media uploader and misc theme widgets ------------------------------------------------------------------------- */ [dir="rtl"] .single-message-item .top-part .content { text-align: right; margin-left: 0; margin-right: 20px; } [dir="rtl"] .single-message-item.customer { text-align: right; } [dir="rtl"] .delivery-time-countdown-wrap .nx-singular-countdown-item + .nx-singular-countdown-item { margin-left: 0; margin-right: 10px; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 1364px) and (min-width: 1200px) { [dir="rtl"] .sbar_collapsed .sidebar-menu { right: -400px; } [dir="rtl"] body > .alert.alert-warning { margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .nav-btn { left: auto !important; } } @media (max-width: 991px) { [dir="rtl"] .page-container { padding-right: 0; } [dir="rtl"] .dataTables_wrapper .dataTables_length, [dir="rtl"] .dataTables_wrapper .dataTables_filter, [dir="rtl"] .dataTables_wrapper .dataTables_info, [dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: right; } }