:root {
    --site-primary: #3274d9;
    --site-primary-text: #ffffff;
    --grafana-bg: #111217;
    --grafana-panel: #181b1f;
    --grafana-panel-alt: #1b1e23;
    --grafana-border: #2b2f36;
    --grafana-text: #d8d9e0;
    --grafana-muted: #8b8f98;
    --grafana-green: #73bf69;
    --grafana-red: #f2495c;
    --grafana-orange: #fa6400;
    --grafana-yellow: #f2cc0c;
    --grafana-blue: #5794f2;
    --mode-line: #28a745;
    --mode-battery: #fd7e14;
    --mode-bypass: #8ecae6;
    --mode-eco: #90ee90;
    --mode-fault: #dc3545;
    --telemetry-color: #38bdf8;
    --active-fault-color: #ef4444;
    --warning-event-color: #f59e0b;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--grafana-bg);
    color: var(--grafana-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

a {
    color: var(--site-primary);
}

a:hover {
    color: #a8c7fa;
}

/* Grafana-inspired application chrome */
.navbar {
    background: #0f1014 !important;
    border-bottom: 1px solid var(--grafana-border);
    min-height: 52px;
    box-shadow: none !important;
}
.navbar-brand {
    color: #f1f2f4 !important;
    font-size: 15px;
    letter-spacing: .1px;
}
.navbar .nav-link {
    color: #aeb2ba !important;
    font-size: 13px;
    padding: .85rem .8rem !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
    background: #1b1e24;
}
.navbar-text {
    color: #aeb2ba !important;
    font-size: 12px;
}
.navbar .dropdown-menu {
    background: #181b1f;
    border: 1px solid #2b2f36;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35) !important;
}
.navbar .dropdown-item {
    color: #e7e9ed;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    color: #ffffff;
    background: #242830;
}
.navbar .dropdown-divider {
    border-top-color: #343942;
    opacity: 1;
}

.container-fluid.py-4 {
    padding-top: 18px !important;
}

h4, h5, h6 {
    color: #e7e9ed;
}
h4 {
    font-size: 16px;
    font-weight: 600;
}
h5 {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    text-transform: none;
}
h6 {
    font-size: 12px;
}

/* Panels/cards */
.card,
.card-metric {
    background: var(--grafana-panel);
    color: var(--grafana-text);
    border: 1px solid var(--grafana-border) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.card-metric .card-body {
    padding: 13px 14px;
}
.card-metric .icon-circle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #20242a;
    color: var(--grafana-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.ups-mode-box {
    background: #1c2b1f;
    color: #fff;
    border: 1px solid #355a3a;
    border-left: 3px solid var(--grafana-green);
    border-radius: 2px;
    text-align: center;
    padding: 1.35rem 1rem;
}
.ups-mode-box h2 {
    color: var(--grafana-green);
    font-weight: 600;
    font-size: 27px;
    margin-bottom: 0;
}
.ups-mode-box h6 {
    color: #9da39f;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.section-badge {
    font-size: .65rem;
    vertical-align: middle;
    border-radius: 2px !important;
    background: #25282e !important;
    color: #b6bac2 !important;
    border: 1px solid #343840;
    font-weight: 500;
}

/* Status/telemetry */
#telemetry-dot.bg-success { background-color: var(--grafana-green) !important; color: #10130f; }
#telemetry-dot.bg-danger { background-color: var(--grafana-red) !important; }
#telemetry-dot.bg-secondary { background-color: #555b66 !important; }
#telemetry-status, #telemetry-updated { color: var(--grafana-muted) !important; }

/* Bootstrap dark-theme overrides */
.text-muted { color: var(--grafana-muted) !important; }
.border-bottom { border-color: var(--grafana-border) !important; }
.bg-primary { background-color: var(--site-primary) !important; color:var(--site-primary-text) !important; }
.bg-success { background-color: var(--grafana-green) !important; }
.bg-danger { background-color: var(--grafana-red) !important; }
.bg-warning { background-color: var(--grafana-yellow) !important; }
.text-dark { color: #171717 !important; }
.text-primary { color: #8ab4f8 !important; }

.alert {
    border-radius: 2px;
    border-width: 1px;
    background: #1b1e23;
    color: var(--grafana-text);
}
.alert-success { border-color: #355a3a; }
.alert-danger { border-color: #67313a; }
.alert-warning { border-color: #66591b; }

.btn {
    border-radius: 2px !important;
    font-size: 13px;
}
.btn-primary {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: var(--site-primary-text);
}
.btn-primary:hover { background: var(--site-primary); border-color: var(--site-primary); filter: brightness(1.12); color: var(--site-primary-text); }
.btn-outline-primary { color: #75a7f7; border-color: #3b5f95; }
.btn-outline-primary:hover, .btn-outline-primary.active { background: #2f5f9f; border-color: #2f5f9f; color: #fff; }
.btn-outline-secondary { color: #aeb2ba; border-color: #4a4f58; }
.btn-outline-warning { color: #f2cc0c; border-color: #776a13; }
.btn-outline-danger { color: #f2495c; border-color: #74303b; }

.form-control,
.form-select,
.input-group-text {
    background: #111318 !important;
    color: #d8d9e0 !important;
    border-color: #343840 !important;
    border-radius: 2px !important;
}
.form-control:focus,
.form-select:focus {
    background: #111318;
    color: #fff;
    border-color: var(--site-primary) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--site-primary) 25%, transparent) !important;
}
.form-control::placeholder { color: #6f747d; }
.form-check-input {
    background-color: #24272d;
    border-color: #555b66;
}
.form-check-input:checked {
    background-color: var(--grafana-green);
    border-color: var(--grafana-green);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--grafana-text);
    --bs-table-border-color: var(--grafana-border);
    margin-bottom: 0;
}
.table thead th {
    color: #9da1aa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.table tbody tr:hover { background: #1d2025; }

.modal-content {
    background: var(--grafana-panel);
    color: var(--grafana-text);
    border: 1px solid var(--grafana-border);
    border-radius: 2px;
}
.modal-header, .modal-footer { border-color: var(--grafana-border); }
.btn-close { filter: invert(1) grayscale(1); }

footer {
    color: #626772 !important;
    border-top: 1px solid #1d2025;
    margin-top: 24px;
}

/* Login screen */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111217;
}
.login-card {
    border: 1px solid var(--grafana-border) !important;
    border-radius: 2px !important;
    background: var(--grafana-panel);
    box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
}
.login-card h4 { color: #e7e9ed; }
.login-card .text-primary { color: var(--grafana-green) !important; }
.toggle-switch .form-check-input {
    width: 2.5em;
    height: 1.3em;
}

/* Compact spacing similar to a Grafana dashboard */
.row.g-3 { --bs-gutter-x: .35rem; --bs-gutter-y: .35rem; }
.row.g-4 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }

/* Exact Grafana-style dashboard layout */
.grafana-dashboard-head {
    display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
    padding:2px 2px 12px; border-bottom:1px solid #24272d; margin-bottom:10px;
}
.dashboard-kicker { color:#777c86; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.grafana-dashboard-head h1 { margin:0; color:#e8e9ec; font-size:18px; font-weight:500; }
.dashboard-controls { display:flex; flex-wrap:wrap; gap:5px; }
.grafana-chip { border:1px solid #343840; background:#17191e; color:#8f949d; padding:4px 8px; font-size:10px; border-radius:2px; }
.grafana-chip strong { color:#d7d9dd; font-weight:500; margin-left:4px; }

.grafana-grid { display:grid; gap:6px; margin-bottom:6px; }
.top-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.six-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.wide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.health-grid { grid-template-columns:2fr 1fr 1fr; }
.grafana-panel { min-width:0; background:#181b1f; border:1px solid #292d34; border-radius:2px; box-shadow:none; overflow:hidden; }
.panel-header { height:29px; display:flex; align-items:center; justify-content:space-between; padding:0 9px; border-bottom:1px solid #292d34; color:#b7bac1; font-size:10px; font-weight:600; }
.panel-menu { color:#777c85; font-size:16px; line-height:1; }
.panel-body { padding:10px; }
.stat-panel { min-height:122px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.stat-value { font-size:56px; line-height:.95; font-weight:500; letter-spacing:-1px; }
.stat-value.green { color:#73bf69; }
.stat-value.red { color:#f2495c; }
.stat-value.orange { color:#fa6400; }
.stat-value.telemetry { color:var(--telemetry-color); }

/* Dashboard event cards: coloured status line and matching Bootstrap icon */
.event-panel { border-top:2px solid var(--event-color); }
.event-panel .panel-header > span:first-child { color:#fff; }
.event-title-icon { margin-right:6px; color:var(--event-color); font-size:12px; }
.event-panel .stat-value { color:var(--event-color); }
.performance-title-icon { margin-right:6px; color:var(--telemetry-color); font-size:12px; }
.telemetry-panel { --event-color:var(--telemetry-color); }
.fault-panel { --event-color:var(--active-fault-color); }
.warning-panel { --event-color:var(--warning-event-color); }
.stat-sub { margin-top:9px; color:#7e838d; font-size:10px; max-width:95%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-chart-body { min-height:122px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.panel-chart .stat-value { font-size:27px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#73bf69; margin-right:5px; }
.mini-bars {
    height:31px;
    display:flex;
    align-items:flex-end;
    gap:3px;
    margin-top:9px;
    overflow:hidden;
    opacity:.92;
}
.mini-bars span {
    display:block;
    flex:1 1 0;
    max-width:7px;
    min-width:3px;
    height:var(--bar-height, 45%);
    min-height:4px;
    background:#73bf69;
    border-radius:1px 1px 0 0;
    box-shadow:0 0 7px color-mix(in srgb, var(--mode-color) 55%, transparent);
    transform-origin:bottom;
    animation:modeVisualizer var(--visualizer-speed, 1.15s) ease-in-out infinite alternate;
    animation-delay:var(--bar-delay, 0s);
}

@keyframes modeVisualizer {
    0% { transform:scaleY(.35); opacity:.55; }
    45% { transform:scaleY(1); opacity:1; }
    100% { transform:scaleY(.58); opacity:.78; }
}

/* Live UPS operating-mode colours */
.mode-panel { --mode-color:#8b8f98; border-top:2px solid var(--mode-color); }
.mode-panel .stat-value { color:var(--mode-color); }
.mode-display { display:flex; align-items:center; gap:10px; color:var(--mode-color); }
.mode-display .mode-icon { color:var(--mode-color); font-size:25px; line-height:1; flex:0 0 auto; }
.mode-panel .status-dot,
.mode-panel .mini-bars span { background:var(--mode-color); }
.mode-panel.mode-line { --mode-color:var(--mode-line); --visualizer-speed:1.15s; }
.mode-panel.mode-battery { --mode-color:var(--mode-battery); --visualizer-speed:.78s; }
.mode-panel.mode-bypass { --mode-color:var(--mode-bypass); --visualizer-speed:1.55s; }
.mode-panel.mode-eco { --mode-color:var(--mode-eco); --visualizer-speed:1.9s; }
.mode-panel.mode-fault { --mode-color:var(--mode-fault); --visualizer-speed:.42s; }
.mode-panel.mode-unknown { --mode-color:#8b8f98; --visualizer-speed:2.4s; }
.mode-panel.mode-fault .mini-bars { animation:faultVisualizerPulse .8s ease-in-out infinite alternate; }

@keyframes faultVisualizerPulse {
    from { filter:brightness(.72); }
    to { filter:brightness(1.45); }
}

@media (prefers-reduced-motion: reduce) {
    .mini-bars span,
    .mode-panel.mode-fault .mini-bars { animation:none; }
}

.grafana-section-title { color:#c5c7cc; font-size:11px; font-weight:600; padding:7px 2px 5px; }
.compact-stat .panel-body { min-height:65px; display:flex; align-items:center; justify-content:center; }
.compact-value { color:#d7d9df; font-size:27px; font-weight:500; text-align:center; }
.compact-value small { color:#777c85; font-size:10px; font-weight:400; margin-left:4px; }
.graph-panel { min-height:250px; }
.chart-wrap { height:214px; padding:8px 10px 10px; }
.checks-panel { min-height:250px; }
.flag-list { display:flex; flex-direction:column; height:100%; }
.flag-row { display:grid; grid-template-columns:1fr 50px; align-items:center; padding:9px 5px; border-bottom:1px solid #272b31; color:#bfc2c8; font-size:11px; }
.flag-row:last-child { border-bottom:0; }
.flag-state { text-align:right; font-size:9px; font-weight:600; letter-spacing:.06em; }
.flag-state.on { color:#73bf69; }
.flag-state.off { color:#656a73; }
.gauge-panel { min-height:250px; }
.gauge-body { height:214px; display:flex; align-items:center; justify-content:center; }
.gauge { --gauge-value:0%; width:145px; height:145px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(#73bf69 var(--gauge-value), #282c32 0); transform:rotate(-45deg); }
.gauge::before { content:""; position:absolute; inset:10px; background:#181b1f; border-radius:50%; }
.gauge-inner { position:relative; z-index:1; transform:rotate(45deg); display:flex; flex-direction:column; align-items:center; }
.gauge-inner strong { color:#73bf69; font-size:27px; font-weight:500; }
.gauge-inner span { color:#858a93; font-size:10px; margin-top:3px; }
.orange-gauge { background:conic-gradient(#fa6400 var(--gauge-value), #282c32 0); }
.orange-gauge .gauge-inner strong { color:#fa6400; }
.table-panel { margin-top:6px; }
.grafana-table-wrap { overflow:auto; }
.grafana-table { width:100%; border-collapse:collapse; font-size:10px; }
.grafana-table th { color:#777c85; text-transform:uppercase; letter-spacing:.05em; font-size:9px; font-weight:600; text-align:left; padding:9px 12px; border-bottom:1px solid #30343b; background:#15171b; }
.grafana-table td { color:#c0c3c9; padding:9px 12px; border-bottom:1px solid #24282e; white-space:nowrap; }
.grafana-table tbody tr:hover { background:#1d2025; }
.empty-cell { text-align:center; color:#6e737c !important; padding:20px !important; }
.event-badge { display:inline-block; min-width:42px; text-align:center; padding:2px 5px; border-radius:2px; font-size:8px; font-weight:600; }
.event-badge.ok { background:#213025; color:#73bf69; }
.event-badge.warning { background:#332b17; color:#f2cc0c; }
.event-badge.fault { background:#351d23; color:#f2495c; }
.event-log-table th { white-space:nowrap; }
.event-log-table td { vertical-align:middle; }
.event-severity { display:inline-block; min-width:58px; padding:3px 7px; border-radius:10px; text-align:center; font-size:9px; font-weight:700; }
.severity-info { background:#173148; color:#38bdf8; }
.severity-warning { background:#3c3012; color:#f59e0b; }
.severity-critical { background:#421e25; color:#ef4444; }
.severity-success { background:#203820; color:#73bf69; }
.date-picker-button { min-width:40px; }
.date-picker-button .bi-calendar3 { color:var(--telemetry-color); }
.data-log-table { font-size:10px; }
.data-log-table th { white-space:nowrap; text-align:center; vertical-align:middle; }
.data-log-table td { text-align:center; vertical-align:middle; white-space:nowrap; }
.data-log-table td:nth-child(2) { text-align:left; }
.telemetry-footer-row { display:flex; align-items:center; gap:8px; padding:8px 2px 0; color:#70757e; font-size:10px; }
.telemetry-updated { margin-left:auto; }
.telemetry-pill { border-radius:2px; padding:3px 6px; font-size:8px; font-weight:600; }
.telemetry-pill.live { background:#73bf69; color:#111217; }
.telemetry-pill.offline { background:#555b66; color:#e2e3e6; }
.grafana-alert { margin-bottom:8px; }
.gps-panel { margin-bottom:6px; }
.gps-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(190px,1fr); gap:12px; }
#ups-map { min-height:330px; border:1px solid #2b2f36; background:#111217; }
.gps-details { display:grid; align-content:start; gap:8px; }
.gps-details div { background:#15171b; border:1px solid #292d34; padding:12px; }
.gps-details span { display:block; color:#7e838d; font-size:10px; text-transform:uppercase; }
.gps-details strong { display:block; color:#d8d9e0; margin-top:4px; font-size:16px; }

/* Administrator appearance controls */
.scheme-option { cursor:pointer; }
.scheme-option input { position:absolute; opacity:0; pointer-events:none; }
.scheme-option span {
    display:flex; align-items:center; gap:8px; min-width:110px; padding:10px 14px;
    border:1px solid var(--grafana-border); border-radius:3px; background:var(--grafana-panel-alt);
}
.scheme-option input:checked + span { border-color:var(--site-primary); box-shadow:0 0 0 1px var(--site-primary); }
.bootstrap-skins { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.skin-option { cursor:pointer; min-width:0; }
.skin-option input { position:absolute; opacity:0; pointer-events:none; }
.skin-option span {
    display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:10px;
    align-items:center; padding:11px; border:1px solid var(--grafana-border);
    border-radius:4px; background:var(--grafana-panel-alt); transition:.15s ease;
}
.skin-option i { grid-row:1/3; width:30px; height:30px; border-radius:50%; background:var(--swatch); border:2px solid rgba(255,255,255,.7); box-shadow:0 0 0 1px var(--grafana-border); }
.skin-option strong { font-size:13px; line-height:1.1; }
.skin-option small { color:var(--grafana-muted); font-family:monospace; font-size:10px; }
.skin-option input:checked + span { border-color:var(--site-primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--site-primary) 35%,transparent); }
.skin-option input:focus-visible + span { outline:2px solid var(--site-primary); outline-offset:2px; }
.preview-navbar { padding:12px 14px; background:var(--site-primary); color:var(--site-primary-text); font-weight:600; border-radius:3px; }
.preview-panel { padding:18px; border:1px solid var(--grafana-border); background:var(--grafana-panel-alt); border-radius:3px; }
.subscriber-ups-list { max-height:260px; overflow-y:auto; background:var(--grafana-panel-alt); }
.subscriber-ups-list label:last-child { border-bottom:0 !important; }

/* The primary colour selected by the administrator */
.text-primary { color:var(--site-primary) !important; }
.btn-outline-primary { color:var(--site-primary); border-color:var(--site-primary); }
.btn-outline-primary:hover,
.btn-outline-primary.active { background:var(--site-primary); border-color:var(--site-primary); color:var(--site-primary-text); }
.navbar .nav-link:hover,
.navbar .nav-link.active { border-bottom-color:var(--site-primary); }
.login-card .text-primary { color:var(--site-primary) !important; }

/* Optional light stylesheet selected by an administrator */
body[data-color-scheme="light"] {
    --grafana-bg:#f3f5f8;
    --grafana-panel:#ffffff;
    --grafana-panel-alt:#f7f8fa;
    --grafana-border:#d9dee7;
    --grafana-text:#263142;
    --grafana-muted:#697386;
    background:var(--grafana-bg);
    color:var(--grafana-text);
}
body[data-color-scheme="light"] .navbar { background:var(--site-primary) !important; border-color:var(--site-primary); }
body[data-color-scheme="light"] .navbar-brand,
body[data-color-scheme="light"] .navbar .nav-link,
body[data-color-scheme="light"] .navbar-text { color:var(--site-primary-text) !important; }
body[data-color-scheme="light"] .navbar .nav-link:hover { color:var(--site-primary-text) !important; background:rgba(127,127,127,.18); }
body[data-color-scheme="light"] .navbar-toggler { background:color-mix(in srgb,var(--site-primary) 75%,#000); }
body[data-color-scheme="light"] h4,
body[data-color-scheme="light"] h5,
body[data-color-scheme="light"] h6,
body[data-color-scheme="light"] .grafana-dashboard-head h1 { color:#202939; }
body[data-color-scheme="light"] .card,
body[data-color-scheme="light"] .card-metric,
body[data-color-scheme="light"] .grafana-panel,
body[data-color-scheme="light"] .modal-content { background:#ffffff; color:#263142; }
body[data-color-scheme="light"] .panel-header,
body[data-color-scheme="light"] .grafana-section-title,
body[data-color-scheme="light"] .flag-row,
body[data-color-scheme="light"] .grafana-table td { color:#344054; }
body[data-color-scheme="light"] .compact-value,
body[data-color-scheme="light"] .gps-details strong { color:#202939; }
body[data-color-scheme="light"] .form-control,
body[data-color-scheme="light"] .form-select,
body[data-color-scheme="light"] .input-group-text { background:#fff !important; color:#263142 !important; border-color:#cfd5df !important; }
body[data-color-scheme="light"] .form-control:focus,
body[data-color-scheme="light"] .form-select:focus { background:#fff; color:#202939; }
body[data-color-scheme="light"] .table { --bs-table-color:#263142; --bs-table-border-color:#d9dee7; }
body[data-color-scheme="light"] .table tbody tr:hover,
body[data-color-scheme="light"] .grafana-table tbody tr:hover { background:#f4f6f8; }
body[data-color-scheme="light"] .grafana-table th,
body[data-color-scheme="light"] .gps-details div { background:#f7f8fa; }
body[data-color-scheme="light"] .gauge::before { background:#fff; }
body[data-color-scheme="light"] .alert { background:#fff; color:#263142; }
body[data-color-scheme="light"] .login-wrapper { background:#eef1f5; }
body[data-color-scheme="light"] .login-card { background:#fff; }
body[data-color-scheme="light"] .btn-close { filter:none; }

@media (max-width: 1100px) {
    .six-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .top-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .dashboard-controls { display:none; }
    .top-grid,.six-grid,.wide-grid,.health-grid { grid-template-columns:1fr; }
    .graph-panel,.checks-panel,.gauge-panel { min-height:220px; }
    .gps-layout { grid-template-columns:1fr; }
}
.bootstrap-pagination-hidden{display:none!important}
.table-pagination-controls .page-link{min-width:2rem;text-align:center}
@media (max-width:575.98px){.table-pagination-controls{justify-content:center!important}.table-pagination-controls nav{width:100%}.table-pagination-controls .pagination{justify-content:center}}
/* Multilingual language selector and right-to-left layout */
.language-menu { max-height: 22rem; overflow-y: auto; min-width: 12rem; }
.language-selector .dropdown-item.active { background-color: var(--site-primary, #0d6efd); color: #fff; }
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .navbar-nav, html[dir="rtl"] .dropdown-menu { text-align: right; }
html[dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }