/* RTL layout for Arabic (Saudi / MENA). Active when . */ html[dir="rtl"] body { direction: rtl; text-align: right; } html[dir="rtl"] .header-settings { right: auto; left: max(10px, env(safe-area-inset-left, 0px)); } html[dir="rtl"] #title .header-settings { right: auto; left: max(10px, env(safe-area-inset-left, 0px)); } html[dir="rtl"] .top-right, html[dir="rtl"] .close-popup, html[dir="rtl"] .popup-shop .close-popup, html[dir="rtl"] .popup-puzzle-lib .close-popup, html[dir="rtl"] #iPopupPuzzleLibrary .popup-puzzle-lib .close-popup { right: auto; left: 8px; } html[dir="rtl"] #bt_close.top-right { left: 10px; right: auto; } html[dir="rtl"] #bt_rotate.top-left { left: auto; right: 10px; } html[dir="rtl"] .fr, html[dir="rtl"] .button, html[dir="rtl"] .close-popup { float: left; } html[dir="rtl"] .shop-modal-title { margin: 4px 12px 12px 40px; } html[dir="rtl"] #title #iPopupSettings .tgl + .tgl-btn { width: 6.25em; } html[dir="rtl"] #title #iPopupSettings .tgl-skewed + .tgl-btn:after, html[dir="rtl"] #title #iPopupSettings .tgl-skewed + .tgl-btn:before { font-family: inherit; } html[dir="rtl"] #iPopupSettings .popup-content span:first-child { text-align: right; } html[dir="rtl"] .popup-content { text-align: right; } html[dir="rtl"] .list-button:first-child, html[dir="rtl"] .mini-buttonlist > .mini-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding: 1px 1px 1px 0; margin-left: 1px; } html[dir="rtl"] .list-button:last-child, html[dir="rtl"] .mini-buttonlist > .mini-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding: 1px 0 1px 1px; margin-left: 0; } html[dir="rtl"] .medal { right: auto; left: 5px; } html[dir="rtl"] .puzzle-lib-lock { right: auto; left: 4px; } html[dir="rtl"] .puzzle-lib-medal { left: auto; right: 4px; } html[dir="rtl"] .list-button:active .medal { right: auto; left: 5px; } html[dir="rtl"] #title .title-legal-footer { direction: rtl; } html[dir="rtl"] .legal-body, html[dir="rtl"] .legal-topbar { direction: rtl; text-align: right; } html[dir="rtl"] .legal-back { margin: -8px -8px -8px 0; }