/* Shows exactly one language of each bilingual pair (see i18n.js) and fixes the handful of spots whose CSS is physically one-sided, so automatic RTL mirroring (from ) doesn't flip them on its own. Everything else - flex rows, CSS grid columns, text alignment - mirrors for free once dir="rtl" is set; don't add an override here unless something is visibly wrong in RTL. */ .i18n[lang="he"] { display: none; } html[dir="rtl"] .i18n[lang="en"] { display: none; } html[dir="rtl"] .i18n[lang="he"] { display: inline; } html[dir="rtl"] .langsel { background-position: left 10px center; padding-left: 26px; padding-right: 10px; } /* index.html / devcards.html feature cards: padding is 0 on the right (LTR) so text doesn't crowd the card to its right; under RTL the free side is the left. */ html[dir="rtl"] .feat { padding: 34px 0 36px 32px; } /* android-debug.html / on-premise.html: the flow/map arrows point right (border-right triangle); under RTL they must point left. Desktop (column arrows) and the responsive.css phone/tablet row layout (::after via border-top triangle) both get a mirrored version. */ html[dir="rtl"] .flow > .link i:after, html[dir="rtl"] .map > .link i:after { right: auto; left: -6px; border-right: 5px solid transparent; border-left: 0; } html[dir="rtl"] .map > .link.both i:before { right: auto; left: -6px; border-left: 5px solid transparent; border-right: 0; } /* cloud-vs-pc.html "You -> computer" mini arrow. */ html[dir="rtl"] .side .mini i:after { right: auto; left: -1px; border-left: 9px solid #6C9BFF; border-right: 0; } /* responsive.css phone tables pin the row label to the left with position:sticky; under RTL it reads from the right, so the pinned column and its background must swap sides too. */ @media (max-width: 820px) { html[dir="rtl"] .tbl > .k, html[dir="rtl"] .cmp > .k, html[dir="rtl"] .roles > .k, html[dir="rtl"] .tbl > .head:first-child, html[dir="rtl"] .cmp > .h:first-child, html[dir="rtl"] .roles > .h:first-child { left: auto; right: 0; } }