/*
 * © 2024 AxonOps Limited. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
* Redesign the UI for the languages from right-to-left
*/
body.rtl {
  direction: rtl;

  .ltr {
    direction: ltr;
  }

  div.body div.left div.content div.navigation div.group div.item ul.dropdown-menu {
    margin: {
      left: auto !important;
      right: 10px !important;
      top: -9px !important;
    }
    top: -307px !important;
    left: auto !important;
    right: 54px !important;
    text-align: right;
  }

  .form-outline {
    direction: ltr;
  }

  span[for-kbd] {
    direction: ltr;
    display: inline-block;
    margin-right: 2px;
  }

  div.body div.hidden-area div.content div.question-container div.textarea div.form-outline,
  div.questions-and-answers {
    direction: ltr;
  }

  div.form-helper.ai-assistant span.float-left {
    float: right;
    direction: rtl;
  }

  div.form-helper.ai-assistant div.form-counter {
    float: left;
  }

  div.body div.hidden-area div.content div.question-container div.send {
    left: 10px;
    transform: rotate(180deg);
  }

  div.body div.right div.content div[content] div.section-actions {
    left: 0;
    right: auto;
  }

  div.body div.right div.content div[content] div.section-actions.show div.action[action="add"] {
    left: 30px;
  }

  div.body div.right div.content div[content] div.section-actions.show div.action[action="refresh"] {
    left: 50px;
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.header div.title,
  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.workspace div.header div.title,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.header div.title,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.workspace div.header div.title,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.header div.title,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.workspace div.header div.title,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.header div.title,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.workspace div.header div.title {
    text-align: right;
  }

  div.modal div.form-outline {
    direction: ltr;
  }

  .modal-footer {
    flex-direction: row-reverse;
  }

  .modal-header .btn-close {
    margin: 0;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#appSettings div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#connectionCredentials div.modal-body div.side-left div.sections div.section div.btn {
    text-align: right;
  }

  *[class^='col-'].left-padding {
    padding: {
      left: 0;
      right: 3px;
    }
  }

  *[class^='col-'].right-padding {
    padding: {
      right: 0;
      left: 3px;
    }
  }

  div.form-check label {
    float: right;
    direction: rtl;
    right: 30px;
  }

  div.modal#addEditConnectionDialog div.modal-footer div.float-left,
  div.modal#appSettings div.modal-footer div.float-left,
  div.modal#connectionCredentials div.modal-footer div.float-left {
    display: flex;
    flex-direction: row-reverse;
  }

  div.form-outline[role="file-selector"]:before {
    direction: rtl;
  }

  .form-check {
    display: flex;
  }

  .checkbox-checked,
  .form-check-input:not([no-color]),
  .form-check-input:not([no-color])[type=checkbox] {
    direction: ltr;
  }

  div.form-check label {
    float: right;
    direction: rtl;
    right: 30px;
  }

  div.form-check.form-switch label {
    right: 45px;
  }

  div.modal#addEditConnectionDialog div.modal-body div.editor-container,
  div.modal#appSettings div.modal-body div.editor-container,
  div.modal#connectionCredentials div.modal-body div.editor-container {
    direction: ltr;
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.connection-info,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.connection-info,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.connection-info,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.connection-info {
    direction: ltr;
    flex-direction: row-reverse;
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.status,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.status,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.status,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.status {
    right: auto;
    left: 16px;
  }

  div.content.notifications-center div.notifications-container div.toast div.toast-header span.toast-type,
  div.toast-container div.toast div.toast-header span.toast-type {
    margin: {
      right: 0;
      left: 5px;
    }
  }

  div.content.notifications-center div.notifications-container div.toast .me-auto,
  div.toast-container div.toast .me-auto {
    left: 0;
    right: 4px;
    margin: {
      right: unset !important;
      left: auto !important;
    }
  }

  .toast-header .btn-close {
    margin: {
      right: var(--mdb-toast-btn-close-ml);
      left: var(--mdb-toast-btn-close-mr);
    }
  }

  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-info div.additional {
    direction: ltr;
    flex-direction: column;
    align-items: flex-end;
  }

  .jstree-children,
  .jstree-container-ul,
  .jstree-node {
    direction: ltr;
  }

  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.right div.header div.connection-tabs ul a.nav-link span.icon {
    margin-right: 0;
    margin-left: 7px;
  }

  div.tab-content div.tab-pane[tab="metadata-differentiation"] div.metadata-content-container div.metadata-content {
    direction: ltr;
  }

  div.tab-content div.tab-pane[tab="metadata-differentiation"] div.metadata-content-container div.centered-badges {
    direction: ltr;
  }

  .form-check-input[type=checkbox] {
    direction: ltr;
  }

  div.tab-content div.tab-pane[tab="metadata-differentiation"] div.metadata-content-container div.save-snapshot-suffix div.time {
    margin: {
      left: 0;
      right: 3px;
    }
    direction: ltr;
  }

  div.tab-content div.tab-pane[tab="metadata-differentiation"] div.metadata-content-container div.save-snapshot-suffix div.form-outline {
    direction: ltr;
  }

  div.modal#loadSnapshot div.snapshots {
    padding-right: 8px;
  }

  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-metadata,
  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-metadata div.metadata-content {
    direction: ltr;
  }

  div.tab-content div.tab-pane[tab="query-tracing"] div.queries-container div.queries div.query span.color {
    float: right;
    margin: {
      right: 0;
      left: 3px;
    }
    bottom: -2px;
  }

  .table > :not(caption) > * > * {
    direction: ltr;
    text-align: right;
  }

  div.body div.hidden-area div.content.notifications-center div.notifications-container div.toast div.toast-body,
  div.body div.hidden-area div.content.notifications-center div.notifications-container div.toast div.toast-footer {
    text-align: right;
  }

  div.dropdown[for-select] ul.dropdown-menu {
    direction: ltr;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header {
    direction: ltr;
  }

  div.modal .btn ion-icon {
    margin: {
      left: 5px;
      right: 0;
    }
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-left,
  div.modal#appSettings div.modal-body div.side-left,
  div.modal#connectionCredentials div.modal-body div.side-left {
    margin: {
      right: 0;
      left: 20px;
    }
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header a,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header a,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.sub-header a {
    flex-direction: row-reverse;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.right-margin,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.right-margin,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.right-margin {
    margin: {
      right: 0;
      left: 4px;
    }
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.left-margin,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.left-margin,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable div.left-margin {
    margin: {
      right: 4px;
      left: 0;
    }
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions {
    margin: {
      left: auto;
      right: 9px;
    }
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action] ion-icon[name="trash"],
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action] ion-icon[name="trash"],
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action] ion-icon[name="trash"] {
    left: auto;
    right: 2px;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action][action="multiple"] input,
  div.modal#appSettings div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action][action="multiple"] input,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section[section="variables"] div.variables-list div.content div.variable [class*="col-"].flex div.actions a[action][action="multiple"] input {
    left: auto;
    right: 3px;
  }

  div.modal#loadSnapshot div.snapshots div.snapshot div._right a ion-icon {
    left: auto;
    right: 3px;
  }

  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-info div.name-ssl div.axonops-agent {
    right: auto;
    left: 20px;
  }

  div.editor {
    direction: ltr;
  }

  div.modal#addEditConnectionDialog {
    div.modal-dialog {
      div.modal-body {
        div.terminate-process {
          right: 80px;
          left: inherit !important;
        }
      }
    }

    &.enable-terminate-process {
      div.modal-dialog {
        div.modal-body {
          div.terminate-process {
            right: 120px;
            left: inherit !important;
          }
        }
      }
    }
  }

  div[content="connections"] {
    div.connections-container {
      div.connection {
        div.terminate-process {
          right: 80px;
          left: inherit !important;
        }

        &.enable-terminate-process {
          div.terminate-process {
            right: 120px;
            left: inherit !important;
          }
        }
      }
    }
  }

  div[content="workarea"] div.workarea div.sub-sides.left div.connection-info div.name-ssl div.connection-status {
    right: auto;
    left: 50px;
  }

  div.body div.right div.content-info div._left {
    float: right;
  }

  div.body div.right div.content-info div._right {
    float: left;
    text-align: -webkit-left;
  }

  div.body div.right div.content-info div._left div._arrow {
    transform: rotate(-90deg) !important;
  }

  div.body div.right div.content-info div._left div._connection div._color {
    margin-right: 0 !important;
    margin-left: 5px!important;
  }

  div.body div.right div.content-info div._left div._main {
    margin-right: 0 !important;
  }

  div.body div.right div.content-info div._left div.icon {
    margin-right: 0 !important;
    margin-left: 5px !important;
  }

  div.body div.right div.content-info div._right div._actions div.action button ion-icon {
    margin-right: 0 !important;
    margin-left: 5px;
  }

  div.body div.right div.content div[content="workarea"] div.workarea div.sub-sides div.tab-content div.tab-pane[tab="cqlsh-session"] {
    direction: ltr !important;
  }

  div.row.for-logging-info div.logs-info span {
    margin-right: 25px;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-left div.sections div.section,
  div.modal#appAbout div.modal-body div.side-left div.sections div.section,
  div.modal#appSettings div.modal-body div.side-left div.sections div.section,
  div.modal#connectionCredentials div.modal-body div.side-left div.sections div.section,
  div.modal#importWorkspaces div.modal-body div.side-left div.sections div.section {
    direction: rtl;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#appAbout div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#appSettings div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#connectionCredentials div.modal-body div.side-left div.sections div.section div.btn,
  div.modal#importWorkspaces div.modal-body div.side-left div.sections div.section div.btn {
    text-align: right;
  }

  div#moreAbout,
  div.modal-section div.notice {
    direction: ltr;
  }

  div.modal#addEditConnectionDialog div.modal-body div.side-right div.modal-section,
  div.modal#appAbout div.modal-body div.side-right div.modal-section,
  div.modal#appSettings div.modal-body div.side-right div.modal-section,
  div.modal#connectionCredentials div.modal-body div.side-right div.modal-section,
  div.modal#importWorkspaces div.modal-body div.side-right div.modal-section {
    padding: 5px 0 0 10px;
  }

  div.modal-section div.notice div.notice-header ion-icon[for-pre] {
    left: 0;
    right: auto;
  }

  #selectContainersManagementToolSettings,
  div.modal#addEditConnectionDialog div.form-helper,
  div.modal#appAbout div.form-helper,
  div.modal#appSettings div.form-helper,
  div.modal#connectionCredentials div.form-helper,
  div.modal#importWorkspaces div.form-helper {
    direction: rtl;
  }

  div.management-tools div.tool[tool="podman"] {
    margin-right: 0;
    margin-left: 6px;
  }

  div.management-tools div.tool div.icon {
    margin-right: 0;
    margin-left: 8px;
  }

  div.form-outline[for="cqlSnippetsAuthorName"] {
    width: calc(100% - 10px);
  }

  div.monaco-editor {
    direction: ltr;
  }

  div.modal div.modal-footer div.float-right {
    direction: ltr;
  }

  div.snippets-objects-treeview {
    .jstree-children,
    .jstree-container-ul,
    .jstree-node {
      direction: rtl;
    }
  }

  .modal-title {
    direction: rtl;
  }

  div.modal#cqlSnippets {
    .modal-title,
    div.side.snippet-editor div.cql-snippet-editor div.snippet-metadata div.row.snippet-tags {
      direction: ltr;
    }
  }

  div.modal#cqlSnippets div.side.objects-treeview div.treeview-actions {
    right: auto;
    left: 24px;
    direction: ltr;
  }

  div.modal#cqlSnippets div.side.snippets-list div.cql-snippets div.snippets-list-header div.sides-actions {
    flex-direction: row-reverse;
  }

  div.modal#cqlSnippets div.side.snippets-list div.cql-snippets div.snippets div.snippet div.content div.snippet-tags {
    direction: ltr;
    text-align: right;
    transform: scale(0.9) translateX(18px);
  }

  div.modal#cqlSnippets {
    div.modal-header {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;
      justify-content: flex-start;

      button.btn-close {
        margin: auto auto auto 0;
      }

      span.badge.current-scope {
        margin-left: 0;
        margin-right: 10px;
        direction: ltr;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: flex-start;

        span {
          direction: rtl;
        }

        ion-icon {
          transform: rotate(-90deg) translateX(0px);
        }
      }
    }

    a.jstree-anchor div.processing {
      left: auto;
      right: 7px;
    }
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.loading .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.workspace div.loading .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.loading .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.workspace div.loading .ldr,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.loading .ldr,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.workspace div.loading .ldr,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.loading .ldr,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.workspace div.loading .ldr {
    right: auto;
    left: 20px;
  }

  div.icon-button {
    &.defaultPath,
    &.selectPath {
      right: 3px !important;
      left: auto !important;
    }
  }

  div#searchConnections div.search-result {
    direction: ltr;
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.test-connection .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.workspace div.test-connection .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.test-connection .ldr,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.workspace div.test-connection .ldr,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.test-connection .ldr,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.workspace div.test-connection .ldr,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.test-connection .ldr,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.workspace div.test-connection .ldr {
    right: auto;
    left: 8px;
  }

  div[content="connections"] div.connections-container div.connection.enable-terminate-process div.terminate-process {
    left: 8px !important;
    right: auto;
  }

  div.content.notifications-center div.notifications-container div.toast div.hide-progress,
  div.pinned-toast-container div.toast div.hide-progress,
  div.toast-container div.toast div.hide-progress {
    transform: scaleX(-1);
  }

  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.connection div.terminate-process,
  div.body div.right div.content div[content][content="workspaces"] div.connections-container div.workspace div.terminate-process,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.connection div.terminate-process,
  div.body div.right div.content div[content][content="workspaces"] div.workspaces-container div.workspace div.terminate-process,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.connection div.terminate-process,
  div.body div.right div.content div[content][content="connections"] div.connections-container div.workspace div.terminate-process,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.connection div.terminate-process,
  div.body div.right div.content div[content][content="connections"] div.workspaces-container div.workspace div.terminate-process {
    left: 12px;
    right: auto;
  }

  div.modal#addEditConnectionDialog div.modal-body.select-type div.connection-type div.icon {
    margin-right: 0;
    margin-left: 5px;
  }

  div.axonops-url {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  div.modal#addEditConnectionDialog div.modal-body.select-type div.connection-type:not(:last-of-type) {
    margin-right: 0;
    margin-left: 15px;
  }

  div.select-page-rows-container div.form-check {
    display: flex;
    flex-direction: row-reverse;
  }

  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-info div.name-ssl div.axonops-agent,
  div.body div.right div.content div[content][content="workarea"] div.workarea div.sub-sides.left div.connection-info div.name-ssl div.axonops-integration-icon {
    right: auto;
    left: 20px;
  }
}
