:root { --sidebar-width: 250px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; } #wrapper { overflow-x: hidden; } #sidebar-wrapper { min-height: 100vh; margin-left: calc(-1 * var(--sidebar-width)); transition: margin .25s ease-out; width: var(--sidebar-width); position: fixed; top: 0; left: 0; z-index: 1000; background: #343a40; /* Dark theme sidebar */ } [dir="rtl"] #sidebar-wrapper { margin-left: 0; margin-right: calc(-1 * var(--sidebar-width)); left: auto; right: 0; } #wrapper.toggled #sidebar-wrapper { margin-left: 0; } [dir="rtl"] #wrapper.toggled #sidebar-wrapper { margin-right: 0; } #page-content-wrapper { min-width: 100vw; transition: margin .25s ease-out; } @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } [dir="rtl"] #sidebar-wrapper { margin-right: 0; } #page-content-wrapper { min-width: 0; width: 100%; margin-left: var(--sidebar-width); } [dir="rtl"] #page-content-wrapper { margin-left: 0; margin-right: var(--sidebar-width); } #wrapper.toggled #sidebar-wrapper { margin-left: calc(-1 * var(--sidebar-width)); } [dir="rtl"] #wrapper.toggled #sidebar-wrapper { margin-right: calc(-1 * var(--sidebar-width)); } #wrapper.toggled #page-content-wrapper { margin-left: 0; } [dir="rtl"] #wrapper.toggled #page-content-wrapper { margin-right: 0; } } .sidebar-heading { padding: 1rem 1.25rem; font-size: 1.25rem; color: #fff; background: #212529; } .list-group-item { border: none; padding: 0.85rem 1.25rem; background-color: transparent; color: #c2c7d0; font-weight: 500; } .list-group-item:hover, .list-group-item.active { background-color: rgba(255, 255, 255, 0.1); color: #fff; } .list-group-item i { margin-right: 10px; width: 20px; text-align: center; } [dir="rtl"] .list-group-item i { margin-right: 0; margin-left: 10px; } .top-navbar { background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .card { box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); margin-bottom: 1rem; border: 0; border-radius: 0.25rem; } .card-header { background-color: transparent; border-bottom: 1px solid rgba(0,0,0,.125); font-weight: 600; } .table th { font-weight: 600; color: #495057; background-color: #f8f9fa; } /* Modal styles */ .modal-header { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; } .modal-footer { border-top: 1px solid #dee2e6; background-color: #f8f9fa; } body.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #e9ecef; } /* Sidebar Sub-menu */ [data-bs-toggle="collapse"][aria-expanded="true"] .toggle-icon { transform: rotate(180deg); } /* Fix for btn-close in modal-header */ .modal-header { position: relative; } .modal-header .btn-close { margin: 0; position: absolute; top: 1rem; } [dir="rtl"] .modal-header .btn-close { left: 1rem; } [dir="ltr"] .modal-header .btn-close { right: 1rem; } /* Fix form-select arrow position in RTL mode */ [dir="rtl"] .form-select { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2.25rem; } [dir="rtl"] .form-select-sm { padding-right: 0.5rem; padding-left: 2rem; } [dir="rtl"] .form-select-lg { padding-right: 1rem; padding-left: 3rem; }