.rtl {
	direction: rtl;

	& .rc-old .buttons-group .button {
		margin-right: 4px;
		margin-left: auto;

		&:first-child {
			margin-right: 0;
		}
	}

	& .rc-old .page-container .content .rocket-form .submit {
		text-align: left;
	}

	& button {
		text-align: right;
	}

	& .text-right {
		text-align: left;
	}

	& .side-nav {
		right: 0;
		left: auto;

		& .header {
			right: 0;
			left: auto;

			& .account-box {
				& .info {
					padding: 10px 18px 10px 0;

					& .thumb {
						float: right;

						&::after {
							right: -14px;
							left: auto;
						}
					}

					& .data {
						float: right;

						padding: 0 10px 0 25px;

						& .wrp {
							text-align: right;
						}
					}
				}

				& .options {
					right: 0;
					left: auto;

					& .status {
						padding-right: 38px;
						padding-left: auto;

						&::after {
							right: 18px;
							left: auto;
						}
					}

					& span.soon {
						right: auto;
						left: -30px;
					}
				}

				& .options._hidden {
					transform: translateX(100%);
				}
			}
		}

		& > .arrow {
			right: auto;
			left: 8px;
		}

		& .arrow {
			transform: rotateY(180deg);
		}

		& .footer {
			right: 0;
			left: auto;
		}

		& .rooms-list {
			direction: ltr;

			& > .wrapper {
				padding-right: 8px;
				padding-left: auto;
				direction: rtl;

				& h3 {
					padding-right: 10px;
					padding-left: auto;

					& .add-room i {
						right: auto;
						left: 6px;
					}
				}

				& ul a {
					padding: 6px 6px 7px 25px;
				}
			}
		}

		& .more {
			padding: 4px 10px 4px 0;
		}

		& .empty {
			padding-right: 10px;
			padding-left: auto;
		}

		& ul .opt {
			right: auto;
			left: 0;

			padding-right: auto;
			padding-left: 10px;

			text-align: left;
		}

		& .flex-nav {
			right: 0;
			left: auto;

			& > section {
				right: 0;
				left: auto;
			}

			& header {
				right: 0;
				left: auto;

				padding-right: 15px;
				padding-left: auto;

				& > div {
					text-align: right;
				}
			}

			& .content > .wrapper {
				direction: rtl;
			}

			& .input-submit {
				margin: 35px -4px 0 0;
			}

			& .button::before {
				right: 0;
				left: auto;
			}

			& footer {
				right: 0;
				left: auto;

				text-align: right;

				& > div {
					text-align: right;
				}
			}

			&.animated-hidden {
				transform: translateX(100%);

				& header,
				& footer,
				& .content {
					transform: translateX(100%);
				}
			}
		}

		& .search-form {
			margin-right: auto;
			margin-left: 20px;

			& .search {
				padding-right: 25px;
				padding-left: auto;
			}
		}

		& h3 {
			padding-right: 10px;
			padding-left: auto;

			&.add-room i {
				right: auto;
				left: 6px;
			}
		}

		& .unread {
			right: auto;
			left: 6px;
		}
	}

	& .side-nav::before {
		right: 8px;
		left: auto;
	}

	& .main-content {
		left: 0;

		transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1);

		&.flex-opened {
			left: calc(var(--flex-tab-width) + 40px);
		}
	}

	& .page-settings {
		& .content > .info {
			padding-left: 20px;
		}

		& .section {
			border-right: none;
			border-left: 1px solid #dddddd;

			& .section-content .input-line > label {
				text-align: right;
			}
		}
	}

	& .messages-box {
		margin: 60px 0 0;

		& .new-message {
			right: 50%;
			left: auto;
		}
	}

	& .terminal {
		direction: ltr;
	}

	& .container-bars {
		& .upload-progress {
			& .upload-progress-progress {
				right: 0;
				left: auto;
			}

			& .upload-progress-text > a {
				float: left;
			}
		}

		& .unread-bar {
			& > a.mark-read {
				float: left;
			}

			& > a.jump-to {
				float: right;
			}
		}
	}

	& .messages-container {
		right: 0;
		left: auto;

		& .edit-room-title {
			margin-right: 4px;
			margin-left: auto;
		}

		& .wrapper {
			right: 0;
			left: auto;
		}

		& .footer {
			right: 0;
			left: auto;
		}

		& .message-form {
			& > div .input-message-container .inner-left-toolbar {
				right: 13px;
				left: auto;
			}

			& textarea {
				padding-right: 49px;
				padding-left: 8px;

				text-align: right;

				border-width: 0 0 0 1px;
				border-right-width: 0;
			}

			& > .stream-info {
				float: right;
			}

			& > .formatting-tips {
				position: relative;
				right: auto;

				float: left;

				& q {
					padding: 0 3px 0 0;

					border-right: 3px solid;
					border-left: 0 none;
				}
			}
		}
	}

	& .account-box .options {
		direction: ltr;

		& > .wrapper {
			direction: rtl;
		}
	}

	& .flex-tab-container {
		border-width: 0 1px 0 0;
	}

	& .flex-tab-bar .tab-button.active {
		margin-right: -1px;
		margin-left: auto;

		border-right: unset;
		border-left: 3px solid #ff0000;
	}

	& .flex-tab .control {
		padding: 12px 30px;

		text-align: right;

		& > a,
		& > form {
			float: right;
		}

		& .more {
			right: 0;
			left: auto;

			transform: translateX(27px);
		}

		& .search-form {
			width: 100%;
			padding: 0 0 0 4px;

			& .icon-plus {
				right: 4px;
				left: auto;
			}
		}

		& .info-tabs {
			right: auto;
			left: 20px;

			text-align: left;
		}
	}

	& .flex-opened .flex-tab .control .more {
		transform: translateX(0);
	}

	& .input-line {
		&.search {
			& .icon-spin {
				right: auto;
				left: 5px;
			}

			& .icon-search,
			& .icon-right-open-small {
				right: 2px;
				left: auto;
			}

			& input {
				padding-right: 20px;
				padding-left: 8px;

				text-align: right;
			}
		}

		& > div .right {
			right: auto;
			left: 10px;
		}

		&.double-col {
			& > label {
				float: right;

				padding: 10px 0 10px 20px;

				text-align: left;
			}

			& > div {
				float: right;

				& label {
					margin-right: auto;
					margin-left: 4px;

					&:nth-last-child(1) {
						margin-right: auto;
						margin-left: 0;
					}

					& input {
						margin-right: auto;
						margin-left: 4px;
					}
				}
			}
		}
	}

	& .user-image .avatar::after {
		right: -12px;
		left: auto;
	}

	& .lines .user-image {
		& button > div {
			float: right;
		}

		& p {
			float: right;

			padding-right: 10px;
			padding-left: auto;
		}
	}

	& .user-view {
		& nav {
			margin-right: -4px;
			margin-left: auto;

			& .back {
				float: left;
			}
		}

		& .stats li {
			border-right: unset;
			border-left: 2px;
		}
	}

	& .burger {
		right: 0;
		left: auto;

		margin-right: 7px;
		margin-left: auto;

		& .unread-burger-alert {
			right: auto;
			left: 4px;
		}

		&.menu-opened i {
			&:nth-child(1) {
				transform: translate(25%, 3px) rotate(45deg) scale(0.5, 1);
			}

			&:nth-child(3) {
				transform: translate(25%, -3px) rotate(-45deg) scale(0.5, 1);
			}
		}
	}

	& .arrow {
		&::before,
		&::after {
			right: calc(50% - 5px);
		}

		&::before {
			transform: rotate(135deg) translateX(4px);
		}

		&::after {
			transform: rotate(-135deg) translateX(4px);
		}

		&.left {
			&::before {
				transform: rotate(-45deg) translateY(-4px);
			}

			&::after {
				transform: rotate(45deg) translateY(4px);
			}
		}

		&.top {
			&::before {
				transform: rotate(45deg) translateX(-2px) translateY(2px);
			}

			&::after {
				transform: rotate(-45deg) translateX(2px) translateY(2px);
			}
		}

		&.bottom {
			&::before {
				transform: rotate(-45deg) translateX(-2px) translateY(-2px);
			}

			&::after {
				transform: rotate(45deg) translateX(2px) translateY(-2px);
			}
		}

		&.close {
			&::before {
				transform: rotate(-45deg);
			}

			&::after {
				transform: rotate(45deg);
			}
		}
	}

	& .message {
		padding-right: 70px;
		padding-left: 20px;

		& .message-dropdown {
			right: -2px;
			left: auto;

			& ul li {
				&:first-child {
					padding-right: 6px;
					padding-left: 8px;

					border-right: unset;
					border-left: 1px solid #eeeeee;
				}

				&:last-child {
					padding-right: 8px;
					padding-left: 13px;
				}
			}
		}

		& .user {
			margin-right: 0;
			margin-left: 5px;
		}

		& .thumb {
			right: 20px;
			left: auto;
		}

		& .info .edited {
			margin-right: 3px;
			margin-left: auto;
			padding-right: 3px;
			padding-left: auto;

			border-right: 1px dotted #bab8d8;
			border-left: unset;
		}

		& .private {
			margin-right: 10px;
			margin-left: auto;
		}

		&.sequential {
			padding-top: 4px;

			& .info {
				right: 5px;
				left: auto;

				text-align: left;

				& .edited {
					margin-right: 0;
					margin-left: auto;
					padding-right: 0;
					padding-left: auto;

					border-right: 0;
				}

				& .message-action {
					float: right;

					margin-right: 1px;
					margin-left: auto;
				}
			}
		}
	}

	& blockquote {
		padding-right: 10px;
		padding-left: auto;

		&::before {
			right: 0;
			left: auto;
		}
	}

	& .ticks-bar {
		right: auto;
		left: 2px;
	}

	& .fixed-title {
		right: 0;
		left: auto;

		padding: 0 20px 0 10px;
	}

	& .list-view {
		& > .title .see-all {
			float: left;
		}
	}

	& .page-list .list {
		& a .info ul {
			margin-right: 3px;
			margin-left: auto;
		}

		& .user-image {
			float: left;

			margin-right: 12px;
			margin-left: auto;
		}

		& table thead th {
			text-align: right;
		}
	}

	& .statistics-table {
		& th,
		& td {
			text-align: right;
		}
	}

	& .code-mirror-box {
		direction: ltr;

		& .buttons {
			text-align: left;
		}

		&.code-mirror-box-fullscreen {
			right: 260px;
			left: 40px;

			& .title {
				padding-right: 10px;
				padding-left: unset;
				direction: rtl;
			}
		}
	}

	& .rocket-form {
		& legend::after {
			right: 0;
		}

		& .logoutOthers {
			text-align: left;
		}

		& .submit {
			text-align: left;
		}
	}

	/* Override toastr messages to show on hte left side */
	& .toast-top-right {
		right: auto;
		left: 12px;
	}

	& .toolbar-search__icon {
		right: 0;
	}

	& .toolbar-search__icon--cancel {
		right: auto;
		left: 0;
	}

	& .message-popup.search-results-list {
		padding: 25px 8px 0 0;

		text-align: right;
		direction: ltr;

		& .popup-item {
			direction: rtl;
		}
	}

	@media (width <= 1100px) {
		& #rocket-chat .flex-opened {
			left: 0;

			& .flex-tab {
				transform: translateX(calc(100% + 40px));
			}
		}
	}

	@media (width <= 780px) {
		& #rocket-chat {
			& .main-content {
				right: 0;
			}

			& .fixed-title h2 {
				margin-right: 45px;
			}
		}

		& .code-mirror-box.code-mirror-box-fullscreen {
			right: 0;
		}
	}
}
