diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index 63c84bb7b8..e913d4d1a9 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -348,7 +348,7 @@
 
 .headerArrowImage {
     height: 20px;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
 }
 
 .backdropContainer {
@@ -378,7 +378,7 @@
 }
 
 .viewControls + .listTopPaging {
-    margin-left: 0.5em !important;
+    margin-inline-start: 0.5em !important;
 }
 
 .criticReview {
@@ -439,12 +439,12 @@
 }
 
 .reviewDate {
-    margin-left: 1em;
+    margin-inline-start: 1em;
 }
 
 .reviewScore {
     position: absolute;
-    left: 0.8em;
+    inset-inline-start: 0.8em;
 }
 
 .itemBackdrop {
@@ -630,7 +630,7 @@
 .layout-mobile .mainDetailButtons {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    margin-left: 0;
+    margin-inline-start: 0;
 
     @include header-poster-padding;
 
@@ -639,6 +639,13 @@
         margin-bottom: 0;
         padding-left: 0;
     }
+
+    [dir="rtl"] & {
+        @media all and (max-width: 32em) {
+            padding-left: unset;
+            padding-right: 0;
+        }
+    }
 }
 
 .subtitle {
@@ -909,8 +916,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .recordingFields button {
-    margin-left: 0;
-    margin-right: 0.5em;
+    margin-inline: 0 0.5em;
     flex-shrink: 0;
 }
 
@@ -1145,16 +1151,16 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .sectionTitleButton {
-    margin-left: 1.5em !important;
+    margin-inline-start: 1.5em !important;
     flex-shrink: 0;
 }
 
 .sectionTitleButton + .sectionTitleButton {
-    margin-left: 0.5em !important;
+    margin-inline-start: 0.5em !important;
 }
 
 .sectionTitleIconButton {
-    margin-left: 1.5em !important;
+    margin-inline-start: 1.5em !important;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: 0.5em !important;
diff --git a/src/assets/css/metadataeditor.scss b/src/assets/css/metadataeditor.scss
index c17998887b..7cf43e0193 100644
--- a/src/assets/css/metadataeditor.scss
+++ b/src/assets/css/metadataeditor.scss
@@ -7,7 +7,7 @@
 }
 
 .libraryTree {
-    margin-left: 0.25em;
+    margin-inline-start: 0.25em;
 }
 
 .offlineEditorNode {
diff --git a/src/components/formdialog.scss b/src/components/formdialog.scss
index 9edd2aa1b2..03fd62f0ea 100644
--- a/src/components/formdialog.scss
+++ b/src/components/formdialog.scss
@@ -12,7 +12,7 @@
 }
 
 .formDialogHeaderTitle {
-    margin-left: 0.25em;
+    margin-inline-start: 0.25em;
 
     /* In case of h1, h2, h3 */
     margin-top: 0;
@@ -20,7 +20,7 @@
 }
 
 .formDialogHeaderTitle:first-child {
-    margin-left: 1em;
+    margin-inline-start: 1em;
 }
 
 .formDialogContent:not(.no-grow) {
@@ -98,8 +98,7 @@
 .formDialogFooterItem-autosize {
     flex-basis: initial;
     flex-grow: initial;
-    padding-left: 2em;
-    padding-right: 2em;
+    padding-inline: 2em;
 }
 
 @media all and (min-width: 50em) {
@@ -108,8 +107,7 @@
     }
 
     .dialogContentInner {
-        padding-left: 1.5em;
-        padding-right: 1.5em;
+        padding-inline: 1.5em;
     }
 }
 
@@ -119,7 +117,6 @@
     }
 
     .dialogContentInner {
-        padding-left: 2em;
-        padding-right: 2em;
+        padding-inline: 2em;
     }
 }
diff --git a/src/components/guide/guide.scss b/src/components/guide/guide.scss
index 4373f697ec..3ea28c684a 100644
--- a/src/components/guide/guide.scss
+++ b/src/components/guide/guide.scss
@@ -307,7 +307,7 @@
 }
 
 .programIcon {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     height: 1em;
     width: 1em;
     font-size: 1.6em;
@@ -340,8 +340,8 @@
 }
 
 .guideChannelName {
-    margin-left: auto;
-    margin-right: 1em;
+    margin-inline-start: auto;
+    margin-inline-end: 1em;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 70%;
diff --git a/src/components/imageUploader/imageUploader.template.html b/src/components/imageUploader/imageUploader.template.html
index 8903aa0106..5aa5a47041 100644
--- a/src/components/imageUploader/imageUploader.template.html
+++ b/src/components/imageUploader/imageUploader.template.html
@@ -13,7 +13,7 @@
             <div class="flex align-items-center" style="margin:1.5em 0;">
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
-                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-inline-start:1.5em;">
                     <span class="material-icons folder" aria-hidden="true"></span>
                     <span>${Browse}</span>
                 </button>
diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html
index f878bf9e7f..6a865e6629 100644
--- a/src/components/imageeditor/imageeditor.template.html
+++ b/src/components/imageeditor/imageeditor.template.html
@@ -11,10 +11,10 @@
         <div id="imagesContainer">
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-inline-start: 1em;">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-inline-start: .5em;">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
@@ -26,10 +26,10 @@
         <div id="backdropsContainer" class="hide">
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-inline-start: 1em;" data-imagetype="Backdrop">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-inline-start: .5em;" data-imagetype="Backdrop">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss
index 1c23c9f1a2..7351c45072 100644
--- a/src/components/indicators/indicators.scss
+++ b/src/components/indicators/indicators.scss
@@ -31,7 +31,7 @@
 }
 
 .indicator + .indicator {
-    margin-left: 0.25em;
+    margin-inline-start: 0.25em;
 }
 
 .indicatorIcon {
diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js
index 2d67f04f0f..80916fcd82 100644
--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@@ -231,7 +231,7 @@ import template from './libraryoptionseditor.template.html';
         html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '</h3>';
         const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
         if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
-            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
+            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-inline-start:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
         }
         html += '</div>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
index d130c820eb..038df635c0 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
@@ -19,7 +19,7 @@
         <div class="folders">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 9cbe9b0519..be16582da5 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -109,7 +109,7 @@ import template from './mediaLibraryEditor.template.html';
 
     function getFolderHtml(pathInfo, index) {
         let html = '';
-        html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-left:.5em;">`;
+        html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-inline-start:.5em;">`;
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
         html += '<h3 class="listItemBodyText">';
         html += escapeHtml(pathInfo.Path);
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
index 8f1822520e..de79d2198d 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
@@ -12,7 +12,7 @@
         <div class="folders hide">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss
index 74ba9d0f6b..b4345115b8 100644
--- a/src/components/mediainfo/mediainfo.scss
+++ b/src/components/mediainfo/mediainfo.scss
@@ -47,13 +47,17 @@
 }
 
 .mediaInfoCriticRating {
-    padding-left: 1.5em;
+    padding-inline-start: 1.5em;
     background-position: left center;
     background-repeat: no-repeat;
     background-size: auto 1.2em;
     min-height: 1.2em;
     display: flex;
     align-items: center;
+
+    [dir="rtl"] & {
+        background-position: right center;
+    }
 }
 
 .mediaInfoCriticRatingFresh {
diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html
index d301687a45..796bae550a 100644
--- a/src/components/metadataEditor/metadataEditor.template.html
+++ b/src/components/metadataEditor/metadataEditor.template.html
@@ -194,7 +194,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Genres}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listGenres"></div>
@@ -203,7 +203,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${People}
                 </h2>
-                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div id="peopleList" class="paperList">
@@ -213,7 +213,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Studios}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listStudios"></div>
@@ -222,7 +222,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Tags}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listTags"></div>
diff --git a/src/components/playerstats/playerstats.scss b/src/components/playerstats/playerstats.scss
index dfdf75a2e0..fb5f36da05 100644
--- a/src/components/playerstats/playerstats.scss
+++ b/src/components/playerstats/playerstats.scss
@@ -2,7 +2,7 @@
     background: rgba(28, 28, 28, 0.8);
     border-radius: 0.3em;
     color: #fff;
-    left: 1.5em;
+    inset-inline-start: 1.5em;
     position: absolute;
     top: 5em;
 }
diff --git a/src/components/recordingcreator/recordingfields.scss b/src/components/recordingcreator/recordingfields.scss
index db0c7e0692..e36ed472f3 100644
--- a/src/components/recordingcreator/recordingfields.scss
+++ b/src/components/recordingcreator/recordingfields.scss
@@ -1,5 +1,5 @@
 .recordingButton {
-    margin-left: 0;
+    margin-inline-start: 0;
     min-width: 10em;
 }
 
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index cb16573f48..d15cc27258 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -1,6 +1,6 @@
 .toastContainer {
     position: fixed;
-    left: 0;
+    inset-inline-start: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index 100fb1ff57..4ec1a22051 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -113,7 +113,7 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardFooter">';
 
             if (canEdit || canDelete(device.Id)) {
-                deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
+                deviceHtml += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
                 deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
                 deviceHtml += '</div>';
             }
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index df8be24712..cc3dde208e 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -310,7 +310,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
 
         if (virtualFolder.showMenu !== false) {
-            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+            html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
             html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
             html += '</div>';
         }
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index 16d9654351..0ce8668ec9 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -83,7 +83,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardFooter">';
 
     if (configPage || plugin.CanUninstall) {
-        html += '<div style="text-align:right; float:right;padding-top:5px;">';
+        html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
         html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
         html += '</div>';
     }
diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss
index 08376e5dea..6f7004b298 100644
--- a/src/elements/emby-input/emby-input.scss
+++ b/src/elements/emby-input/emby-input.scss
@@ -47,12 +47,12 @@
 
 .inlineForm .inputContainer:first-child,
 .inlineForm .selectContainer:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .inlineForm .inputContainer:last-child,
 .inlineForm .selectContainer:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .inputLabel {
diff --git a/src/elements/emby-radio/emby-radio.scss b/src/elements/emby-radio/emby-radio.scss
index 2d7f584171..bc62176265 100644
--- a/src/elements/emby-radio/emby-radio.scss
+++ b/src/elements/emby-radio/emby-radio.scss
@@ -44,7 +44,7 @@
     height: 100%;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     overflow: visible;
 }
diff --git a/src/elements/emby-toggle/emby-toggle.scss b/src/elements/emby-toggle/emby-toggle.scss
index 3b5c5a5f64..316624bced 100644
--- a/src/elements/emby-toggle/emby-toggle.scss
+++ b/src/elements/emby-toggle/emby-toggle.scss
@@ -59,7 +59,7 @@
 .mdl-switch__thumb {
     background: #999;
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: -0.25em;
     height: 1.44em;
     width: 1.44em;
diff --git a/src/index.html b/src/index.html
index d77378d3f8..34092e46c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -98,7 +98,7 @@
         .mainDrawerHandle {
             position: fixed;
             top: 0;
-            left: 0;
+            inset-inline-start: 0;
             bottom: 0;
             z-index: 1;
             width: 0.8em;