// Import
@import "../../../../../assets/dev/less/kalium-less/loaders";
@import "../../../../../assets/dev/less/kalium-less/mixins";

// Variables
@main-color: #2c3338;
@menu-color: #2c3338;
@content-color: #f1f1f1;
@theme-main-color: #00b19d;
@theme-hover-menu-main-color: #00b19d;
@secondary-color: #ea6153;
@default-border-radius: 5px;
@primary-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@default-font-size: 14px;
@small-font-size: 14px;
@lab-color: #eee;
@theme-hover-menu-main-color: #00b19d;
@screen-sm-min: 768px;

// Laborator Theme Options
#of_container {
	width: auto !important;
	margin: 20px 20px 20px 2px;
	font-family: @primary-font !important;

	@media screen and (max-width: 800px) {
		margin: 10px 10px 10px 0px;
	}

	#of_form {

		#header {
			overflow: hidden;
			background: @main-color;
			border: none;
			border-bottom: none !important;
			border-radius: @default-border-radius;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow: none;

			.logo {
				position: relative;
				margin: 22px 20px;

				#setting-error-tgmpa {
					display: none !important;
				}

				h2 {
					font-size: 23px;
					margin: 0;
					padding-right: 0;
				}

				h2, span {
					line-height: 1;
					color: #fff;
					font-weight: normal;
				}

				.holidays-pine {
					@w: 35px;
					@h: 43px;

					position: absolute;
					//bottom: -23px;
					left: 145%;
					font-family: 'KaliumAdminIcons';
					color: #fff;
					font-size: 24px;
					top: 5px;

					&:before {
						content: '\e92e';
					}

					@media screen and (max-width: 768px) {
						display: none;
					}
				}
			}

			.laborator-notice {
				display: none !important;
			}

			.theme-icon {
				display: flex;
				text-decoration: none;
				color: #fff;
				align-items: center;

				&:hover {
					color: #fff;
				}

				i {
					font-size: 32px;
				}

				span {
					position: relative;
					display: block;
					margin-left: 10px;
				}
			}
		}

		#info_bar {
			height: 34px;
			border: none !important;
			box-shadow: none !important;
			top: 15px;
			display: block;
			position: absolute;
			right: 0;
			background: transparent;

			.expand {
				border-radius: @default-border-radius;
			}

			.expand, .close {
				border: none !important;
				margin: 1px 10px 0 0;
				background: @theme-main-color !important;
				padding: 3px 5px 4px 5px;
				user-select: none;

				&:before {
					font: normal normal normal 14px/1 'Font Awesome 5 Free';
					font-size: 16px;
					padding: 3px;
					line-height: 16px;
					color: #fff;
				}

				&:hover {
					background: darken(@theme-main-color, 5%) !important;
				}

				@media screen and (max-width: 768px) {
					display: none;
				}
			}

			#expand_options {
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 350ms;
				font-size: 18px;
				text-indent: 0;

				i {
					color: #fff;
				}
			}

			.expand {
				background: #40474c !important;
			}

			.close {
			}
		}

		#of_save, .of-save-button {
			transition: all 350ms;

			.loading-spinner {
				display: block;
				float: left;
				overflow: hidden;
				max-width: 0;
				margin-left: -5px;
				transition: all 1s ease-in-out;

				i {
					@s: 12px;

					width: @s;
					height: @s;
					line-height: @s;
					font-size: @s;
					overflow: hidden;
					margin-right: 5px;
				}
			}

			em {
				font-style: normal;
			}

			&.is-loading {

				.loading-spinner {
					width: auto;
					max-width: 300px;
					transition-delay: 0ms;
				}
			}

			/*
			.loading-spinner {
				margin-right: 5px;
				margin-left: -5px;
				display: inline-block;
				width: 0px;
				overflow: hidden;
				position: relative;
				line-height: 1;
				top: 5px;
				margin-top: -7px;
				transition: all 300ms ease-in-out;
			}

			em {
				font-style: normal;
			}

			&.is-loading {
				background-color: lighten(@theme-main-color, 2%);

				.loading-spinner {
					width: 17px;
				}
			}

			@media screen and (max-width: 480px) {
				display: none;
			}
			*/
		}

		#main {
			background: @main-color !important;
			border: none !important;
			border-right: 2px solid @main-color !important;
			clear: both;
			display: flex;
			border-bottom: 0px !important;
			border-bottom-left-radius: @default-border-radius;
			border-bottom-right-radius: @default-border-radius;

			@media screen and (max-width: 800px) {
				border-left: 2px solid @main-color !important;
			}

			@media screen and (max-width: 400px) {
				border-right: 1px solid @main-color !important;
				border-bottom: 1px solid @main-color !important;
				border-left: 1px solid @main-color !important;
			}

			@media screen and (max-width: 800px) {
				flex-direction: column;
			}


			#of-nav {
				background: @menu-color;
				width: 20% !important;
				max-width: 280px;
				border-top: 1px solid rgba(255, 255, 255, .05);
				border-bottom-left-radius: @default-border-radius;

				@media screen and (max-width: 960px) {
					width: 55px !important;
				}

				@media screen and (max-width: 800px) {
					width: 100% !important;
					max-width: 100%;
					border-bottom: 2px solid @menu-color;
				}

				ul {
					margin: 12px 0;
					margin-bottom: 60px;

					li {
						position: relative;
						box-shadow: none;
						border-bottom: 0px solid @main-color;
						margin-right: 0px !important;

						@media screen and (max-width: 800px) {
							width: 20%;
							text-align: center;
							float: left;
						}

						a {
							display: flex;
							align-items: center;
							padding: 10px 17px;
							font-size: @small-font-size;
							font-weight: normal;
							background-image: none;
							opacity: 1;
							color: rgba(255, 255, 255, .75);

							@media screen and (max-width: 800px) {
								justify-content: center;
							}

							span {
								vertical-align: top;
								margin-left: 10px;
							}

							.header-icon {
								display: inline-block;
								width: 16px;
								height: 16px;
								//margin-right: 10px;
								vertical-align: bottom;

								svg {
									width: 100%;
									height: 100%;
									fill: rgba(255, 255, 255, .75);
								}
							}

							&:hover {
								color: @theme-hover-menu-main-color !important;
								box-shadow: inset 4px 0 0 0 currentColor;
								transition: box-shadow .1s linear;

								@media screen and (max-width: 800px) {
									box-shadow: none;
								}

								svg {
									fill: @theme-main-color;
								}
							}
						}

						svg {
							fill: #ccc;
						}

						&.current {

							a {
								color: #fff;
								font-weight: 600;
								background: transparent !important;

								svg {
									fill: #fff;
								}
							}
						}

						@media screen and (max-width: 960px) {

							span {
								display: none;
							}
						}

						&.current {

							a {
								//background: darken(@main-color, 1%) !important;
								color: #fff;

								&:hover {
									color: #fff !important;
								}

								&:after {
									right: 0;
									border: 8px solid transparent;
									content: " ";
									height: 0;
									width: 0;
									position: absolute;
									pointer-events: none;
									border-right-color: #f1f1f1;
									top: 50%;
									margin-top: -8px;

									@media screen and (max-width: 960px) {
										content: none;
									}
								}
							}
						}
					}
				}

				#of_reset {
					position: absolute;
					bottom: 10px;
					left: 20px;
					color: @content-color;

					@media screen and (max-width: 960px) {
						display: none;
					}
				}
			}

			#content {
				flex-grow: 1;
				//width: 76% !important;
				min-height: 604px;
				padding-left: 2% !important;
				padding-right: 2% !important;
				// padding-top: 20px;
				padding-bottom: 20px;
				margin-left: 0px;
				// margin-top: -2px;
				border: none !important;
				background: @content-color;
				font-family: @primary-font !important;
				margin-bottom: 2px solid @menu-color;
				margin-bottom: 2px;
				border-bottom-right-radius: @default-border-radius;

				.is-expanded& {
					width: auto !important;
					margin-left: 2px !important;
					padding-left: 18px !important;
					padding-right: 18px !important;

					.tab-pane {
						display: block !important;
					}

					.smof-tabs {
						display: none;
					}
				}


				@media screen and (max-width: 960px) {
					width: 88.333% !important;
				}

				@media screen and (max-width: 800px) {
					width: 96% !important;
					min-height: auto !important;
				}

				.option {

					.controls {
						max-width: 42%;

						@media screen and (max-width: 800px) {
							//                             width: 100%;
							max-width: 100%;
						}

						.button-inline {
							display: inline-block !important;
						}

						.button-small {
							font-size: 14px !important;
						}

						.button-primary {
							background-color: #00a0d2;
							transition: all 300ms ease-in-out;

							em {
								font-style: normal;

								i.fa-check {
									position: relative;
									left: -5px;
								}
							}

							.loading-spinner {
								margin-right: 5px;
								margin-left: -4px;
								display: inline-block;
								width: 0px;
								overflow: hidden;
								position: relative;
								line-height: 1;
								top: 2px;
								transition: all 300ms ease-in-out;
							}

							&.is-loading {
								opacity: 0.5;

								.loading-spinner {
									width: 17px;
								}
							}
						}

						input, textarea, select {
							width: 100%;
							box-shadow: none;
							background-color: #fff !important;
							border-color: #7e8993 !important;
							font-size: 14px;
							color: #32373c !important;
							border-radius: (@default-border-radius - 1);
							transition: all 300ms ease-in-out 0;
							margin-left: 1px;
							font-family: @primary-font !important;
							padding: 0 8px;

							&:hover {
								background-color: #fff;
							}

							&:focus {
								/*
								border: 1px solid @theme-main-color !important;
								transition: all 300ms ease-in-out 0;
								.box-shadow(0 1px 4px 0 rgba(0, 0, 0, .1));
								*/

								border-color: #007cba;
								//box-shadow: 0 0 0 1px #007cba;
								outline: 2px solid transparent;
							}
						}

						input {
							margin-left: 0px !important;
						}

						textarea {
							transition: none;
							padding: 6px 8px 1px 8px;
						}

						select {
							width: auto;
						}


						.of-radio-img-img, .of-radio-img-selected {
							transition: all 300ms ease-in-out 0;
						}

						.hidden {
							display: none !important;
						}

						// Postfix
						.of-input-postfix {
							@w: 12%;

							float: right;
							width: @w;
							text-align: center;
							background-color: #fafafa;
							border: 1px solid #7e8993;
							border-left: 0;
							line-height: 28px;
							border-radius: 0 @default-border-radius+1 @default-border-radius+1 0;
							box-sizing: border-box;
							color: #666;

							+ .of-input {
								float: left;
								width: 100% - @w;
								border-right: 1px solid transparent;
								margin-right: 0;
								height: 30px;
								border-radius: @default-border-radius+1 0 0 @default-border-radius+1;
							}
						}

						.of-input {
							.placeholder(#72777c);
						}

						// Menu content type
						.of-input-menu-content-type-wrapper {
							@menu-content-border-color: #7e8993;
							@menu-content-border-radius: @default-border-radius;

							border: 1px solid @menu-content-border-color;
							border-radius: @menu-content-border-radius;
							margin-bottom: 10px;

							.menu-content-toolbar {
								display: flex;
								flex-direction: row;
								background-color: #f7f7f7;
								border-top-left-radius: @menu-content-border-radius;
								border-top-right-radius: @menu-content-border-radius;
								border-bottom: 1px solid @menu-content-border-color;

								.menu-content-toolbar-title {
									flex-grow: 1;
									padding: 15px;
									color: #000;
									font-weight: 500;
									font-size: 14px;
								}

								.menu-content-buttons {
									display: flex;
									flex-direction: row;

									.menu-content-button {
										display: flex;
										position: relative;

										&--add-entry {
											border-left: 1px solid @menu-content-border-color;
										}

										.button {
											display: flex;
											align-items: center;
											border: 0;
											border-radius: 0;
											background: none;
											color: #000;
											margin: 0;
											width: auto;
											min-height: 0;
											box-shadow: none;

											i {
												color: #000;
												transition: all 250ms;
											}

											&:hover {

												i {
													color: @theme-main-color;
												}
											}

											&.add-new-menu-content-entry {

												i {
													font-size: 16px;
												}
											}

											&.set-menu-content-alignment {

												&[data-align="center"] i:before {
													content: '\e930';
												}

												&[data-align="right"] i:before {
													content: '\e92f';
												}
											}
										}

										.menu-content-align-popover {
											position: absolute;
											bottom: 100%;
											bottom: calc(100% + 5px);
											right: 0;
											display: flex;
											flex-direction: row;
											align-items: center;
											border-radius: @default-border-radius;
											border: 1px solid @menu-content-border-color;
											justify-content: center;
											opacity: 0;
											visibility: hidden;
											transition: visibility 200ms ease-in-out, opacity 200ms ease-in-out;
											background-color: #fff;

											&.open {
												visibility: visible;
												opacity: 1;
											}

											a {
												display: flex;
												flex-direction: row;
												border-right: 1px solid @menu-content-border-color;
												color: #3c434a;
												padding: 5px 10px;
												text-decoration: none;
												line-height: 1;
												font-size: 12px;
												transition: all 200ms ease-in-out;
												align-items: center;

												i, span {
													line-height: 1;
												}

												i {
													margin-right: 5px;
												}

												&:hover {
													color: #555;
												}

												&.current {
													color: #15a48b;
												}

												&:last-child {
													border-right: 0;
												}
											}

											// Bottom popover arrow
											&:before,
											&:after {
												position: absolute;
												top: 100%;
												content: '';
												margin-right: 13px;
											}

											&:before {
												border: 8px solid;
												right: 0px;
												border-color: @menu-content-border-color transparent transparent transparent;
											}

											&:after {
												border: 7px solid;
												right: 1px;
												border-color: #fff transparent transparent transparent;
											}
										}
									}
								}
							}

							.of-input-menu-content-entries {
								padding: 15px;
								padding-right: 5px;
								padding-bottom: 5px;


								&:empty:before {
									display: block;
									padding-bottom: 10px;
								}

								.of-input-menu-content-type {
									display: flex;
									flex-direction: row;
									position: relative;

									// Drag icon
									&:after {
										content: '';
										border: 2px solid @menu-content-border-color;
										width: 1px;
										height: 12px;
										border-top: 0;
										border-bottom: 0;
										cursor: grab;
										transition: all 300ms ease-in-out;
										margin-left: 5px;
										margin-bottom: 12px;
										align-self: center;
										visibility: hidden;
										opacity: 0;
									}

									&:hover:after {
										visibility: visible;
										opacity: 1;
									}

									&:active {

										&:after {
											cursor: grabbing;
										}

										.select_wrapper {
											box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
										}
									}

									// Column
									&--column {
										position: relative;
										margin-bottom: 5px;

										// Menu Content Dropdown
										&.menu-content-column {
											flex-grow: 1;

											.select_wrapper {
												width: 100% !important;
												height: 33px;
												box-sizing: border-box !important;
												transition: all 300ms;
											}
										}

										// Options
										&.menu-content-options {
											display: flex;
											position: relative;

											.menu-content-dropdown-icon {
												display: flex;
												background-color: #fff;
												margin-bottom: 9px;
												align-items: center;
												text-decoration: none;
												color: #000;
												padding-left: 5px;
												padding-right: 10px;
												border: 1px solid @menu-content-border-color;
												border-top-right-radius: @menu-content-border-radius;
												border-bottom-right-radius: @menu-content-border-radius;
												border-left: 0;
												margin-left: -6px;
											}

											.menu-content-options-popover {
												position: absolute;
												top: 100%;
												right: 0%;
												background-color: #fff;
												border: 1px solid @menu-content-border-color;
												border-radius: @menu-content-border-radius;
												z-index: 1000000;
												margin-top: -6px;
												transition: all 100ms ease-in-out;
												visibility: hidden;
												opacity: 0;

												.menu-content-option {
													//padding: 8px 15px;
													padding: 6px 12px;
													border-bottom: 1px solid @menu-content-border-color;
													width: 250px;

													&:last-child {
														border-bottom: 0;
													}

													label {
														display: block;
														padding-bottom: 10px;
													}

													.menu-content-option-description {
														display: block;
														font-size: 11px;
														color: #666;
													}

													.menu-content-option-input-select {
														width: 100%;
														font-size: 13px;
														//height: auto;
														min-height: auto;
														line-height: 24px;
														height: 26px;
													}

													.menu-content-option-input {

														input[type="checkbox"] {
															width: 17px;
															margin-bottom: 0 !important;
														}
													}
												}

												&.show {
													visibility: visible;
													opacity: 1;
												}

												// Bottom popover arrow
												&:before,
												&:after {
													position: absolute;
													bottom: 100%;
													content: '';
													margin-right: 8px;
												}

												&:before {
													border: 8px solid;
													right: 0px;
													border-color: transparent transparent @menu-content-border-color transparent;
												}

												&:after {
													border: 7px solid;
													right: 1px;
													border-color: transparent transparent #fff transparent;
													margin-top: 2px;
												}
											}

											&.inactive {
												display: none;
											}
										}
									}

									// Remove entry
									&--remove {
										@size: 16px;

										display: flex;
										align-items: center;
										margin-left: -@size;

										a {
											display: block;
											position: relative;
											width: @size;
											height: @size;
											visibility: hidden;
											opacity: 0;
											line-height: 13px;
											text-align: center;
											margin-bottom: 10px;
											background-color: #ea6153;
											border-radius: 50%;
											transition: all 300ms ease-in-out;
											z-index: 10;
											left: 7px;
											top: -17px;
											text-decoration: none;

											i {
												color: #fff;
												font-size: 7px;
												text-align: center;
											}

											&:hover {
												box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
											}
										}
									}

									&:hover .of-input-menu-content-type--remove a {
										visibility: visible;
										opacity: 1;
									}
								}

								.of-input-menu-content-type-placeholder {
									border-radius: @menu-content-border-radius;
									border: 1px dotted @menu-content-border-color;
									margin-bottom: 10px;
									margin-right: 10px;
									height: 30px;

									&:last-child {
										margin-bottom: 14px;
									}
								}
							}
						}
					}

					.explain {
						width: 54.5%;
						font-size: @small-font-size;
						color: #3c434a !important;

						&.above {
							margin-bottom: 15px;
						}

						@media screen and (max-width: 800px) {
							width: 100%;
							display: content;
						}

						code, kbd {
							border-radius: @default-border-radius;
						}
					}

					.screenshot {

						.of-uploaded-image {
							pointer-events: none;
							cursor: default;
						}
					}
				}

				// Entries columns mixin
				.entries-columns(@cols) {

					.of-input-menu-content-entries {
						flex-direction: row;
						flex-wrap: wrap;
						display: flex;
						margin-left: -10px;
						margin-right: -10px;

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

						.of-input-menu-content-type {
							width: (100% / @cols);
							padding-left: 10px;
							padding-right: 10px;
							box-sizing: border-box;
						}

						.of-input-menu-content-type-placeholder {
							width: (99% / @cols);
							margin-left: 0;
							margin-right: 0;
						}
					}
				}

				// Centered Header Builder
				.header-builder-container {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					margin-right: 20px;

					~ .section {
						position: relative;
						z-index: 100000;
					}

					.controls {
						width: 100%;
						max-width: 100%;
						margin-right: 0;
					}

					.explain {
						display: none;
					}

					#section-custom_header_content,
					#section-custom_header_content_left,
					#section-custom_header_content_right {
						overflow: visible;
					}

					#section-custom_header_content_left,
					#section-custom_header_content_right {
						width: 38%;
					}

					#section-custom_header_content_logo_image {
						display: flex;
						align-items: center;
						text-align: center;
						width: 24%;

						.option-wrapper {
							width: 100%;
							padding-left: 15px;
							padding-right: 15px;
						}

						.logo-image-display-placeholder {
							width: auto;
							height: auto;
							max-height: 50px;
							max-width: 60%;
							border: 0;
							padding: 0;
							background: none;
						}
					}

					#section-custom_header_content {
						width: 100%;
						.entries-columns(3);
					}


					// Header Type: Standard
					&.is-standard {

						#section-custom_header_content_left {
							display: none;
						}

						#section-custom_header_content_logo_image {
							width: 15%;

							.option-wrapper {
								padding-left: 0;
							}

							img {
								//width: 90%;
							}
						}

						#section-custom_header_content_right {
							width: 85%;

							.entries-columns(3);
						}
					}

					// Header Type: Columned
					&.is-logo-centered {
					}
				}

				// Header Builder Templates
				.content-builder-templates {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					width: 98%;
					margin-left: -10px;
					margin-right: -10px;

					.content-builder-template-entry {
						flex: 0 0 25%;
						max-width: 25%;
						box-sizing: border-box;
						padding: 0 10px;
						margin-bottom: 20px;

						a {
							display: block;
							position: relative;
							background: #f9f9f9;
							border: 1px solid #7e8993;
							transition: all 250ms ease-in-out;
							transition-duration: .25s;
							border-radius: 3px;
							overflow: hidden;
							text-decoration: none;

							&:hover {
								transform: translateY(-4px);
								box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
							}

							img {
								width: 100%;
								height: auto;
							}

							span {
								display: block;
								font-weight: 400;
								font-size: 12px;
								margin: 5px 0;
								color: #3c434a;
								text-align: center;
							}
						}
					}
				}

				// Header Builder width
				.section-content_builder_templates {

					.controls {
						width: 100%;
						max-width: 100%;
					}
				}

				// Top Header Section
				#section-top_header_bar_content_left,
				#section-top_header_bar_content_right {
					.entries-columns(3);
				}

				// Menu content below the logo (split in columns)
				/*
				#section-custom_header_content {

					.of-input-menu-content-entries {
						display: flex;
						flex-wrap: wrap;

						.of-input-menu-content-type {
							flex: 0 0 31%;
							padding-right: 20px;

							&--remove {
								z-index: 100;

								a {
									left: 7px;
								}
							}
						}
					}

					.of-input-menu-content-type-placeholder {
						flex: 0 0 31%;
						padding-right: 8px;
					}
				}

				#section-menu_centered_content_logo_image {

					.controls {
						padding-top: 10px;
					}
				}

				#section-header_menu_centered_info {
					overflow: visible;

					&.afold-collapsed {
						overflow: hidden;
					}

					.option .controls {
						max-width: 100%;

						.of-info {
							padding: 0;
							background-color: transparent;
							border: none;
							padding-bottom: 10px;
							border-bottom: 1px solid #7e8993;

							h3 {
								font-size: 1.36em;
								margin: 0;
							}
						}
					}
				}
				 */

				.section-info {

					.controls {

						.of-info {
							border-radius: @default-border-radius;
							border: 1px solid #ccc;

							.shop-imgd-info {
								display: block;

								+ .shop-imgd-info {
									margin-top: 5px;
								}

								em {
									font-style: normal;
									display: inline-block;
									min-width: 160px;
								}

								strong {

									abbr {
										border-bottom: 1px dotted #999;
										font-weight: normal;
										color: #999;
									}
								}
							}
						}
					}
				}

				.section-multicheck {

					.controls {

						label {
							font-size: @small-font-size;
							color: #3c434a;
						}
					}
				}

				.section {

					h3.heading {
						margin-top: 20px;
						border-bottom: 0px solid #e1e1e1;
						color: #333;
						font-weight: 500;
					}

					// Tabs
					.smof-tabs {
						width: 100%;
						@lab-smof-tabs-list-links: #3c434a;
						@lab-smof-borders: #e1e1e1;

						border-bottom: 0px solid @lab-smof-borders;
						padding: 0;
						margin-top: 1px;
						padding-left: 35px;
						margin-left: -35px;
						margin-right: -25px;
						margin-top: -10px;
						.clearfix();

						@media screen and (max-width: 800px) {
							padding-left: inherit !important;
							margin-left: inherit !important;
							margin-right: inherit !important;
							margin-top: inherit !important;
						}

						li {
							position: relative;
							float: left;
							display: block;
							margin: 0;
							padding: 0;

							&:first-child a {
								margin-left: 0px !important;
							}

							a {
								display: block;
								background: none;
								border: 0;
								font-weight: normal;
								font-size: 14px;
								padding-top: 10px;
								padding-bottom: 5px;
								margin: 0px 10px 0px 10px;
								position: relative;
								outline: none;
								margin-bottom: 0;
								color: @lab-smof-tabs-list-links;
								text-decoration: none;
								box-shadow: none;
								transition: all 250ms;

								&:hover {
									color: darken(@lab-smof-tabs-list-links, 20%);
								}

								&:after {
									content: '';
									display: block;
									height: 1px;
									background: @theme-main-color;
									position: absolute;
									top: 100%;
									left: 0;
									right: 0;
									opacity: 0;
									height: 2px;
									transition: opacity .1s linear;
								}
							}

							&:hover a {

								&:after {
									opacity: 1;
								}
							}

							+ li {
								margin-left: 10px;

								&:before {
									position: absolute;
									height: 15px;
									width: 1px;
									background: @lab-smof-borders;
									top: 50%;
									left: 0%;
									margin-left: -6px;
									content: '';
									transform: translateY(-50%);
								}
							}

							&.active {

								a {
									color: #111;

									&:after {
										opacity: 1;
									}
								}
							}
						}
					}

					.tab-panes-container {
					}

					.tab-pane {
						display: none;

						&.active {
							display: block;
						}
					}

					&.has-wrapper {
						margin-bottom: 0px;

						> .option-wrapper {
							margin-bottom: 10px;
							//margin-top: 10px;

							.heading {

								span {
									opacity: 0.5;
									display: inline-block;
									margin-right: 25px;

									&.padding-left {
										padding-left: 10px;
									}
								}
							}
						}
					}

					&.section-tabs {

						> .option-wrapper {
							margin-top: 10px;
						}
					}

					&.section-sorter {
						margin-bottom: 20px;
					}

					&.section-checkbox.has-wrapper {

						h3.heading {
							margin-bottom: 15px;
						}

						.controls {
							margin-top: 0;

							input[type="checkbox"] {
								margin-bottom: 0px !important;
							}
						}

						.explain {
							margin-top: 0px;
						}
					}

					// Advanced Folding
					&[data-advanced-folding-match] {
						overflow: hidden;
						max-height: 700px;
						opacity: 1;
						transition: max-height 2.5s, opacity 1s;

						&#section-image_loading_placeholder_preselected {
							max-height: 2000px;

							&.afold-collapsed {
								max-height: 0px;
							}
						}
					}

					&.afold-collapsed {
						max-height: 0px;
						transition: max-height 0.5s, opacity 1s;
						opacity: 0;
						//transition: none;
					}

					// Specific Sections that need to be styled differently
					&#section-portfolio_type,
					&#section-blog_template,
					&#section-shop_catalog_layout,
					&#section-image_loading_placeholder_type,
					&#section-shop_single_product_images_layout,
					&#section-main_menu_type,
					&#section-footer_bottom_style,
					&#section-custom_skin_builder_info,
					&#section-favicon_set,
					&#section-top_header_bar_content_left,
					&#section-top_header_bar_content_right {
						.option-wrapper {

							.option {

								.controls {
									width: 100%;
									max-width: 100%;

									span img {
										max-width: 250px;
									}
								}
							}
						}


						&#section-main_menu_type {

							.option-wrapper .option .controls {
								margin-bottom: 0;

								.smof-img-radio {
									margin-right: 10px;

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

								span {
									margin-bottom: 20px;

									img {
										max-width: 210px;
									}
								}
							}
						}
					}


					&#section-custom_skin_builder_info {

						.of-info {
							background-color: #ffe9cb;
							border: 0;
							padding: 10px 15px;

							code {
								display: block;
								font-size: 11px;
								padding: 5px;
								margin: 5px 0;
							}
						}
					}

					&#section-portfolio_type {

						.option-wrapper {

							.option {

								.controls {

									span img {
										max-width: 250px;
									}
								}
							}
						}
					}

					&#section-favicon_set {

						.tc-link {
							text-decoration: none;
							font-size: 12px;
							padding: 5px 10px;
							display: inline-block;
							background: @theme-hover-menu-main-color;
							border-radius: @default-border-radius;
							color: #fff;
							line-height: 20px;
							vertical-align: top;
							margin-bottom: 15px;
							transition: all 250ms;

							&:hover {
								background: darken(@theme-hover-menu-main-color, 5%);
							}
						}

						.tc-site-icon {
							display: inline-block;
							border-radius: @default-border-radius;
							overflow: hidden;
							max-height: 30px;
							vertical-align: top;
							margin-right: 5px;

							img {
								height: auto;
								width: 100%;
							}
						}

						.of-info {
							padding: 5px 20px;
						}

						~ #section-favicon_image,
						~ #section-apple_touch_icon {
							opacity: 0.2;
							pointer-events: none;
						}
					}

					&#section-menu_full_bg_info {

						.option-wrapper {

							.option {

								.controls {
									margin-top: 0px;
								}
							}
						}
					}

					// Subsets Ordering
					&#section-font_primary_subset,
					&#section-font_heading_subset {

						.controls {
							.clearfix;

							.multicheck-entry {
								float: left;
								width: 33.333333%;
								white-space: nowrap;
							}
						}
					}

					&#section-shop_cart_icon {

						.option-wrapper {

							.option {

								.controls {

									span img {
										max-width: 40px;
										margin-bottom: 0;
										border-radius: @default-border-radius;
									}
								}
							}
						}
					}

					&#section-shop_catalog_layout,
					&#section-shop_single_product_images_layout {

						.option-wrapper {

							.option {

								.controls {

									span img {
										max-width: 205px;
									}

									.smof-img-radio strong {
									}
								}
							}
						}
					}

					// Header Builder
					&#section-custom_header_info {

						.of-info {
							border: 0;
							padding: 0;
							background: none;
							border-bottom: 1px solid #e1e1e1;

							h3 {
								margin-bottom: 10px;
							}
						}

						.controls {
							max-width: 100%;
						}
					}

					&#section-skin_palettes_list {
						margin-top: 20px;

						.of-info {
							background: none;
							padding: 0;
							border: 0;

							.skin-palette {
								@s: 35px;

								border: 1px solid #7e8993;
								display: block;
								border-radius: @default-border-radius;
								float: left;
								clear: both;
								position: relative;

								span {
									display: block;
									width: @s;
									height: @s;
									background: #7e8993;
									float: left;
									border-top: 0;
									border-bottom: 0;

									+ span {
										border-left: 1px solid #7e8993;
									}

									&:first-child {
										border-top-left-radius: @default-border-radius;
										border-bottom-left-radius: @default-border-radius;
									}

									&:nth-child(6) {
										border-top-right-radius: @default-border-radius;
										border-bottom-right-radius: @default-border-radius;
									}

								}

								&:first-child {
									border-top-left-radius: @default-border-radius;
									border-bottom-left-radius: @default-border-radius;
								}

								&:last-child {
									border-top-right-radius: @default-border-radius;
									border-bottom-right-radius: @default-border-radius;
								}

								em {
									position: absolute;
									text-decoration: none;
									left: 100%;
									margin-left: 20px;
									top: 8px;
									font-style: normal;
									white-space: nowrap;
									color: #3c434a;
								}

								+ .skin-palette {
									margin-top: 10px;
								}

								&:hover {

									em {
										color: #3c434a;
									}
								}
							}
						}
					}

					&.section-sliderui {

						.option .controls input {
							width: 20%;
						}
					}
				}

				.section-checkbox {
					.controls {
						margin-top: -3px;
					}
				}

				#section-custom_css_feature {
					margin-top: 0px;
				}

				.wp-color-result {
					padding-left: 122px;
				}
			}

			.smof-img-radio {
				position: relative;
				display: inline-block;
				background: lighten(@content-color, 3%);
				margin-right: 15px;
				border: 1px solid #7e8993;
				//margin-left: -2px;
				transition-duration: 0.25s;
				border-radius: @default-border-radius;
				margin-bottom: 10px;

				img {
					margin-right: 0;
					border: 0 !important;
					border-top-left-radius: @default-border-radius;
					border-top-right-radius: @default-border-radius;

					&:hover {
						opacity: 1;
					}
				}

				strong {
					font-weight: normal;
					font-size: 12px;
					display: block;
					margin-bottom: 8px;
					color: #3c434a;
					text-align: center;
					cursor: default;
				}

				&.of-radio-img-selected {
					border-color: @theme-main-color;
					background-color: @theme-main-color;
					box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
					transform: translateY(0px) !important;

					strong {
						color: #fff;
					}
				}

				&:hover {
					transform: translateY(-4px);
					box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
				}
			}

			.section-images .controls {
				margin-bottom: 10px;
			}

			.of-save-sticky {
				position: fixed;
				right: 0;
				top: 50%;
				display: flex;
				flex-direction: row;
				border-radius: @default-border-radius 0 0 @default-border-radius;
				color: #fff;
				padding: 8px 13px;
				margin-right: 22px;
				overflow: hidden;
				transition: all 380ms ease-in-out;
				text-decoration: none;
				background: @main-color;
				align-items: center;
				flex-wrap: nowrap;
				width: auto;
				max-width: 20px;
				opacity: 0.8;
				z-index: 9999;

				@media screen and (max-width: 800px) {
					margin-right: 12px;
				}

				.icons,
				.save-text {
					display: flex;
					flex-shrink: 0;
					transition: all 100ms ease-in-out;
				}

				.icons {
					position: relative;
					width: 24px;
					height: 24px;
					margin-left: -2px;

					i {
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						transition: all 180ms ease-in-out;
						font-size: 16px;

						&.icon-save {

							svg {
								width: 18px;
								height: 18px;
							}
						}

						&.icon-saving {
							opacity: 0;
						}
					}
				}

				.save-text {
					opacity: 0;
					margin-left: 10px;
				}

				&:hover {
					max-width: 300px;
					opacity: 1;
					border: 0 !important;

					.save-text {
						opacity: 1;
					}
				}

				&.is-loading {
					opacity: 1;

					.icons {

						.icon-save {
							opacity: 0;
						}

						.icon-saving {
							opacity: 1;
						}
					}
				}
			}
		}

		.save_bar {
			height: 40px;
			border-radius: 0px;
			background: @content-color;
			border: none !important;
			box-shadow: none;
			// border-top: 1px solid #3c3c3c !important;
			margin-top: 0px;
			padding-left: 0px;
			padding-right: 0px;
		}
	}

	.theme-options-developer {
		margin-top: 5px;
		float: left;

		i {
			margin-right: 5px;
			font-size: 18px;
			vertical-align: top;
		}
	}

	.of-option-image {
		pointer-events: none;
		cursor: default;
		border-color: #7e8993;
	}

	.button-primary {
		background: @theme-main-color;
		box-shadow: none;

		em, i {
			text-shadow: none;
		}

		&:hover {
			background: darken(@theme-main-color, 5%);
		}
	}

	.smof-reset-button, .remove-image {
		background: @secondary-color !important;
		box-shadow: none;
		transition: all 200ms ease-in-out 0;

		i {
			font-size: 12px;
		}

		&:hover {
			color: #fff;
		}
	}

	.remove-image {
		color: #fff !important;
	}

	.sorter {

		ul {
			background: #fff;
			border: 1px solid #7e8993;
			width: 143px;
			border-radius: @default-border-radius;

			@media screen and (max-width: 400px) {
				width: 39% !important;
			}

			h3 {
				color: #3c434a;
			}

			li {
				border-radius: 16px !important;
				border: none;
				height: auto !important;
				padding: 8px;
				line-height: normal;
				box-shadow: none;
				font-size: @default-font-size;
				font-weight: normal;
				background-image: none !important;
				background-color: #e1e1e1;
			}
		}
	}

	.google_font_preview {
		padding: 0 !important;
		border: 0 !important;

		span {
			display: block;

			+ span {
				padding-top: 10px;
			}
		}

		.nums {
			font-size: 35px;
		}

		.uppers {
			font-size: 30px;
		}
	}

	.spin {
		animation: spin 1.5s linear infinite;
	}

	// Version Indicator
	h2 {
		position: relative;

		.theme_version {
			position: absolute;
			left: 100%;
			top: 50%;
			padding: 1px 6px 2px 6px;
			border-radius: 16px;
			margin-left: 10px;
			background-color: #40474c;
			color: #fff;
			text-align: center;
			font-size: 11px;
			text-decoration: none;
			line-height: normal;
			transform: translateY(-40%);

			//width: auto !important;
			//height: auto !important;
			//position: relative;
			//top: 9px;
			//line-height: normal;
			//overflow: hidden;
			//font-size: 11px;
			//font-weight: normal;
			//text-decoration: none;
			//padding: 1px 6px 2px 6px;
			//margin-left: 10px;
			//background-color: #40474c;
			//color: #fff !important;
			//text-align: center;
			//border-radius: 16px;
			//float: right;
			//transition: all 300ms ease-in-out;
			//
			//&:hover {
			//    background-color: darken(@theme-main-color, 5%);
			//}
		}
	}

	h3 {
		font-weight: 500;
	}

	// Removes Outline
	a:hover, a:active, a:focus {
		outline: none;
	}

	// Removes Focus Glow
	:focus {
		border-color: transparent;
		outline: 0;
		box-shadow: none;
	}

	button, .button, input.button.button-small.wp-picker-default {
		border-radius: @default-border-radius !important;
		box-shadow: none;
		border-color: transparent !important;
		height: auto !important;
		background: @theme-main-color;
		padding: 6px 15px 6px 15px;
		line-height: normal;
		color: #fff;
		transition: all 300ms ease-in-out 0;
		font-size: @default-font-size;
		display: table;
		font-weight: normal !important;
		transition: all 350ms;

		&:hover {
			border-color: transparent !important;
			color: #fff !important;
			background: darken(@theme-main-color, 5%);
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
		}
	}

	.select_wrapper {
		width: 94% !important;
		background-color: #fff !important;
		box-shadow: none;
		border-color: #7e8993;
		padding: 1px 10px;
		font-size: @default-font-size;
		color: #32373c !important;
		border-radius: @default-border-radius+1;
		font-family: @primary-font !important;
		background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
		background-size: 16px 16px;

		.select {
			width: 100% !important;
		}

		span {
			padding: 0px 10px;
		}
	}

	.button.media_upload_button,
	.button.remove-image {
		padding-right: 12px;

		i {
			margin-left: 5px;
			font-size: 12px;
		}
	}

	small {
		font-size: 11px;

		.note {
			line-height: 1.2;
			font-weight: 700;
			text-transform: uppercase;
			font-size: 10px;
		}

		&.nowrap {
			white-space: nowrap;
		}
	}

	explain {
		font-size: 11px;
	}

	//.checkbox {
	//    width: 18px !important;
	//    height: 18px !important;
	//}

	//XTMP.input[type=checkbox]:checked:before {
	//    margin: -4px 0 0 -4.5px;
	//    // color: #16A087;
	//    font-size: 23px;
	//}

	#section-custom_css_feature,
	#section-wc_not_activated,
	#section-image_loading_placeholder_preselected,
	#section-custom_gf,
	#section-typolab_warning,
	#section-custom_gf_warning,
	#section-custom_coming_soon_warning,
	#section-shop_image_dimensions_info,
	#section-portfolio_lb {

		.controls {
			max-width: 100% !important;
		}
	}

	#section-image_loading_placeholder_preselected {
		@h: 100px;
		@bg: @main-color;

		.of-info {
			background: transparent !important;
			border: 0 !important;
			padding: 0 !important;
		}

		.loaders {
			@h: 140px;

			width: 100%;
			box-sizing: border-box;
			display: flex;
			margin: 10px -10px;
			flex: 0 1 auto;
			flex-direction: row;
			flex-wrap: wrap;

			.loader {
				box-sizing: border-box;
				display: flex;
				flex: 0 1 auto;
				flex-direction: column;
				flex-grow: 1;
				flex-shrink: 0;
				flex-basis: 25%;
				max-width: 25%;
				height: @h;
				align-items: center;
				justify-content: center;
				position: relative;
				cursor: pointer;

				&:before {
					@s: 10px;

					position: absolute;
					display: block;
					content: '';
					background-color: @bg;
					z-index: 0;
					left: @s;
					right: @s;
					top: @s;
					bottom: @s;
					border-radius: @default-border-radius;
					transition: all 150ms;
				}

				&.current:before {
					box-shadow: inset 0px 0px 0px 5px @theme-main-color;
				}
			}
		}
	}

	#section-portfolio_lb {

		.controls {

			p {
				margin: 0;
			}
		}
	}

	.switch-options {
		float: left;
		display: block;
		margin-bottom: 11px;

		.cb-enable, .cb-disable, .cb-enable span, .cb-disable span {
			background-image: none;
		}

		.cb-enable {
			border-top-left-radius: @default-border-radius;
			border-bottom-left-radius: @default-border-radius;
			border-right: none !important;
		}

		.cb-disable {
			border-top-right-radius: @default-border-radius;
			border-bottom-right-radius: @default-border-radius;
			background-color: transparent !important;
			border-left: none !important;
		}

		.cb-enable, .cb-disable {
			min-width: 50px !important;
			background: transparent !important;
			border: 1px solid @theme-main-color;
			color: #3c434a;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);

			&.selected {
				background: @theme-main-color !important;
				border: 1px solid @theme-main-color !important;
			}

			span {
				padding: 5px 17px 6px 17px;
				line-height: normal;
				text-align: center !important;
				display: flex;
				font-weight: normal;
				font-size: @default-font-size;
			}
		}

		.cb-disable {
			&.selected {

			}
		}

		&.reverse {

			.cb-enable {
				float: right;
			}

			.cb-disable {
				border-left: 1px solid @theme-main-color !important;
				border-radius: 0;
				border-top-left-radius: @default-border-radius;
				border-bottom-left-radius: @default-border-radius;
			}

			.cb-enable {
				border-right: 1px solid @theme-main-color !important;
				border-radius: 0;
				border-top-right-radius: @default-border-radius;
				border-bottom-right-radius: @default-border-radius;
			}
		}
	}

	.smof-reset-button {
		background: transparent !important;
		padding-left: 0px !important;

		&:hover {
			color: red !important;
			box-shadow: none;
		}
	}

	#of-popup-reset, #of-popup-save, #of-popup-fail {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		position: fixed;

		@media screen and (max-width: 400px) {
			top: 75% !important;
		}
	}

	.of-save-save, .of-save-fail, .of-save-reset {
		background-image: none;

		i {
			@s: 18px;

			width: @s;
			height: @s;
			font-size: @s;
			line-height: 1;
			//margin-top: -2px;
		}
	}

	.of-save-popup {
		border-radius: @default-border-radius;

		@media screen and (max-width: 400px) {
			width: 92% !important;
		}

		div {
			padding: 30px;
		}

		i {
			padding-right: 5px;
		}
	}

	.upload_button_div {
		display: flex;
	}

	#of_backup_button {
		float: left;
	}

	.wp-picker-holder {

		.iris-picker {

			.iris-strip .ui-slider-handle {
				border: 4px solid #aaa !important;
				box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
				height: 4px;
			}


			.iris-slider-offset {
				margin: 0;
			}
		}
	}

	.wp-picker-container {
		@border: #7e8993;

		.wp-color-result {
			padding: 0;
			margin: 0;
			border: 1px solid @border !important;
			box-shadow: none;

			.wp-color-result-text {
				border-left-color: @border;
				padding: 0 10px;
				position: relative;
				z-index: 5;
				height: 30px;
				line-height: 30px;
				border-radius: 0 4px 4px 0 !important;
			}

			.color-alpha {
				width: 60% !important;
				border-radius: 4px 0 0 4px !important;
			}
		}

		.wp-picker-input-wrap {
			width: 225px;

			label {
				display: block;

				input {
					width: 100% !important;
				}
			}
		}

		.iris-picker {
			border-color: @border;
			border-radius: 3px;
		}
	}

	/*.instance-picker-container {
		@border: #7e8993;
		@height: 30px;
		@radius: 13px;

		width: 230px;
		margin-bottom: 8px;

		.button {
			width: 100%;
			height: @height !important;
			border: 1px solid @border;
		}

		// Color
		.color-alpha {
			width: 49% !important;
			height: 100% !important;
			border: 1px solid @border;
			border-top-left-radius: @default-border-radius+1 !important;
			border-bottom-left-radius: @default-border-radius+1 !important;

		}

		// Button
		.instance-color-result-text {
			background: #fff;
			border: 0;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			line-height: @height - 2;
			width: 50%;
			padding: 0;
			text-align: center;
			border: 1px solid @border;
			border-top-right-radius: @default-border-radius+1;
			border-bottom-right-radius: @default-border-radius+1;
		}

		.instance-picker-input-wrap {
			margin-top: 8px;
		}

		label,
		input.instance-color-picker {
			width: 100%;
		}

		.iris-picker {
			border-radius: @default-border-radius;
			border-color: #7e8993;
		}
	}*/

	/*
.instance-color-result {
		height: auto !important;
		border-radius: @default-border-radius;
		box-shadow: none;
		border: 1px solid #ccc !important;
		color: #666 !important;
		margin-left: 0px;

		&:after {
			height: auto;
			font-size: @default-font-size;
			color: #666;
			background: #fff;
			border-radius: @default-border-radius;
			border-top-right-radius: 3px !important;
			border-bottom-right-radius: 3px !important;
			padding: 5px 15px;
			box-shadow: none;
		}

		&:focus:after, &:hover:after {
			color: #666 !important;
			border-color: #ccc !important;
		}

		&.instance-picker-open {
			top: 0px !important;
		}
	}
*/

	.of-radio-img-img {
		max-width: 100%;

		&.no-description {
			margin-bottom: 0 !important;
		}
	}

	#social_order ul {
		width: 39.5% !important;
		margin: 0px;

		&:first-child {
			margin-right: 10px;
		}

		@media screen and (max-width: 800px) {
			width: 44% !important;

			&:first-child {
				margin-right: 22px;
			}
		}
	}


	.ajax-loading-img-bottom {
		content: "";
	}

	#info_bar {

		.ajax-loading-img-bottom {
			float: left;

			&:before {
				margin-right: 5px;
			}
		}
	}

	.save_bar {

		.ajax-loading-img-bottom:before {
			color: @theme-main-color;
			position: relative;
			top: 5px;
			margin-right: 5px;
		}
	}

	.ajax-loading-img-bottom:before {
		content: "\f021" !important;
		font: normal normal normal 14px/1 'Font Awesome 5 Free';
		font-size: 16px;
		line-height: 21px;
		color: #fff;
		width: 16px;
		animation: fa-spin 2s infinite linear;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 800px) {
	#of_container input.checkbox {
		width: 25px !important;
		height: 25px;
	}

	#of_container #content .section-checkbox .controls {
		width: 16px;
	}

	#of_container #of_form #main .smof-img-radio {
		margin-bottom: 15px;
	}
}

#section-exclude_search_post_types {
	input {
		width: 15px !important;
		margin-right: 6px;
	}
}

#of_container #content .controls input[type=number] {
	min-height: 30px;
}

.appearance_page_theme-options {

	#setting-error-tgmpa {
		display: none !important;
	}
}

// Other
#TB_window img#TB_Image {
	border: none !important;
	margin: 40px 0 0 15px;
}

#user_custom_js_head, #user_custom_js {
	font-size: 13px;
}

.clearfix() {
	&:before,
	&:after {
		content: " "; // 1
		display: table; // 2
	}
	&:after {
		clear: both;
	}
}


.transall {
	transition: all 250ms ease-in-out;
}

iframe#TB_iframeContent {
	margin-bottom: -5px !important;
	width: 100% !important;
}

#TB_closeWindowButton:focus .tb-close-icon {
	box-shadow: none;
}


/** RTL Maker Code **/
.rtl #of_container #of_form #main #of-nav ul li i.fa {
	padding-left: 8px;
	padding-right: 0;
}

.rtl #of_container #of_form #main #content .section .smof-tabs {
	padding-right: 35px;
	padding-left: 0;
}

.rtl #of_container #of_form #main #content .section .smof-tabs li {
	float: right;
}

.rtl #of_container #of_form #main #content .section .smof-tabs li:first-child a {
	margin-left: 10px !important;
	margin-right: 0 !important;
}

.rtl #of_container #of_form #main #content .section .smof-tabs li + li:before {
	right: 0;
	left: auto;
	margin-right: -6px;
	margin-left: 0;
}

.rtl #of_container #of_form #main #content .section .smof-tabs li + li {
	margin-right: 10px;
	margin-left: 0;
}

.rtl #of_container #of_form #main .smof-img-radio {
	margin-left: 15px;
	margin-right: 0;
}

.rtl #of_container #content .section .explain {
	float: right;
	padding: 0 0 0 10px;
}

.rtl #of_container #content .section .controls {
	float: right;
	margin: 0 0 0 15px;
}

//XTMP.rtl #of_container input[type=checkbox]:checked:before {
//    margin: -4px -4.5px 0 0;
//}

.rtl #of_container .select_wrapper span {
	right: 0;
	left: auto;
}

.rtl #of_container .select_wrapper {
	background-position: left center;
	float: right;
}

.rtl .cb-enable, .cb-disable, .cb-enable span, .cb-disable span {
	float: right;
}

textarea[name="user_custom_js_head"], textarea[name="user_custom_js"] {
	direction: ltr;
}

.rtl #section-custom_skin_bg_color:before {
	left: 0;
	right: auto;
}

.rtl #of_container {
	margin: 20px 2px 20px 20px;
}

.rtl #of_container #of-nav {
	float: right;
}

.rtl #of_container #content {
	float: right;
}

.rtl #of_container #of_form #main .of-save-sticky {
	position: fixed;
	border-radius: @default-border-radius @default-border-radius 0 0;
	right: auto;
	left: 0;
	margin-left: 22px;
	margin-right: 0;
}

.rtl #of_container #of_form #main #of-nav ul li.current a:after {
	left: 0;
	right: auto;
	border-left-color: #f1f1f1;
	border-right-color: transparent;
}

.rtl #of_container #expand_options {
	direction: ltr;
}

@media screen and (max-width: 960px) {
	.rtl #of_container #of_form #main #content {
		width: 86.5% !important;
	}
}

@media screen and (max-width: 800px) {
	.rtl #of_container #of_form #main #content {
		width: 96% !important;
		min-height: auto !important;
	}
}