.emulateTouch {
	.modal-scrollable {
		.modal {
			z-index: 1 !important;
			overflow: hidden;
			.transform(translateZ(0));
			.user-select(none);
			.text-adjust(none);
		}
	}
}

&.modal-open {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.modal-backdrop {
	background: @modal-backdrop !important;
}

.modal-scrollable {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: 100%;
	overflow: auto;

	.iScrollIndicator {
		background: @main-iScroll-color !important;
		border: 0 none !important;
	}

	.modal {
		position: absolute;
		.border-radius(0);
		-webkit-overflow-scrolling: auto;

		background: @modal-background;
		color: @modal-text;

		-webkit-transition: opacity 0.3s linear, margin-left 0.5s ease-out, margin-top 0.3s ease-out !important;
		-moz-transition: opacity 0.3s linear, margin-left 0.5s ease-out, margin-top 0.3s ease-out !important;
		-o-transition: opacity 0.3s linear, margin-left 0.5s ease-out, margin-top 0.3s ease-out !important;
		transition: opacity 0.3s linear, margin-left 0.5s ease-out, margin-top 0.3s ease-out !important;

		/* Make modal appear from left */
		top: 0 !important;
		bottom: auto !important;
		height: auto !important;
		left: 0 !important;
		width: 95% !important;
		margin: 0 !important;
		min-height: 100%;
		margin-left: -110% !important;
		display: block;

		&.hide:not(.in) {
			display: none;
		}

		.box-sizing(border-box);

		/*Disable some other scroll libary*/
		.slimScrollDiv, #settings_plugin_pluginmanager_repositorydialog_list {
			height: auto !important;
		}

		&.shake {
			-webkit-animation-name: shakeTouchUI;
			-moz-animation-name: shakeTouchUI;
			-o-animation-name: shakeTouchUI;
			animation-name: shakeTouchUI;
		}

		.accordion-group {
			border: 0 none !important;

			.accordion-heading {
				display: none;
			}

			.accordion-body {
				border: 0 none;

				.accordion-inner {
					padding: 0;
					border: 0 none;
				}
			}
		}

		&#connection_dialog {
			.btn-primary {
				display: none !important;
			}
		}

		&.in {
			top: 0 !important;
			margin-left: 0% !important;
		}

		&.show-dropdown {
			.modal-header {
				.span3 {
					height: auto;
				}
			}
		}

		.modal {

			&-body {
				padding: (@modal-gutter - 10px) @modal-gutter;
				margin-bottom: 60px;
				min-height: 0 !important;
				max-height: none !important;

				#settings_dialog_menu {
					width: 0;
					height: 0;
				}

				#settingsTabs,
				#usersettings_access_link,
				#usersettings_interface_link,
				#usersettings_plugin_appkeys_link {
					display: none;
				}

				.tab-pane {
					.nav.nav-pills {
						display: block;
					}
				}

				.span9.scrollable {
					width: 100% !important;
					overflow: visible;
					margin: 0;
					padding: 0;

					.help-inline {
						display: block;
						padding: 5px 0 0;
					}
				}
				.pagination ul > li {
					> a {
						color: @main-color-text;

						&:active {
							color: contrast(@main-color-darker);
						}
					}
					&.active,
					&.disabled {
						> a {
							color: @modal-text;
						}
					}
				}
			}
			&-footer {
				.border-radius(0);
				.box-sizing(border-box);

				background: @modal-footer-background;
				border-top-color: @modal-border;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding-right: @modal-gutter;
				padding-left: @modal-gutter;
				z-index: 2;
			}
			&-header {
				padding: 20px @modal-gutter;
				border-bottom-color: @modal-border;

				#settings_dialog_label,
				> h3 {
					font-size: 1.4rem;
					line-height: 1.7rem;
					padding: 0 50px 0 0;
					color: mix(@modal-background, contrast(@modal-background), 40%);
				}

				.close {
					color: @modal-text;
					.rem(font-size, 42);
					padding: 13px;
					margin-top: -10px;
					background: transparent;
					opacity: .6;

					&:hover {
						opacity:1;
					}
				}

				span.hidden {
					display: inline-block !important;
					position: relative;
					padding-left: 10px;
					color: contrast(@modal-background);
					cursor: pointer;

					&:before {
						content: "/";
						color: mix(@modal-background, contrast(@modal-background), 70%);
						margin-right: 10px;
					}
					&:after {
						.font-icon-reset();
						content: @fa-legacy-var-chevron-down;

						font-size: 0.8rem;
						text-rendering: auto;
						position: relative;
						top: -4px;
						margin-left: 10px;
					}

					.show-dropdown {
						position: absolute;
						top: 40px;
						left: 0;
						overflow: hidden;
						max-height: 68vh;
						height: auto;
						z-index: 29;
						min-height: 0 !important;
						margin-bottom: 100px;
						min-width: 170px;
						overflow-scrolling: touch;
						-webkit-overflow-scrolling: touch;

						background-color: @modal-background;
						border: 1px solid contrast(@modal-background, @light-darker-darker-color, white);

						ul {
							margin: 0;
							padding: 0;

							.nav-header {
								margin: 0;
								.box-sizing(border-box);
								.rem(font-size, 11);
							}
						}

						li {
							display: block;
							width: 100%;

							a {
								.rem(font-size, 15);
								padding: 10px 15px;
								.rem(line-height, 24);
								margin: 0;
								.border-radius(0);
							}
						}

						.iScrollIndicator {
							background: contrast(@modal-background, @dropdown-iScroll-color, white) !important;
							border: 0 none !important;
						}

					}
				}
			}
		}

		.full-sized-box {
			padding: 0 !important;
			position: relative;
		}

	}
}

.controls {
	margin-left: 20px;
}

@-webkit-keyframes shakeTouchUI {
	0%, 100% {margin-left:0;}
	10%, 30%, 50%, 70%, 90% {margin-left:-10px;}
	20%, 40%, 60%, 80% {margin-left:10px;}
}

@-moz-keyframes shakeTouchUI {
	0%, 100% {margin-left:0;}
	10%, 30%, 50%, 70%, 90% {margin-left:-10px;}
	20%, 40%, 60%, 80% {margin-left:10px;}
}

@-o-keyframes shakeTouchUI {
	0%, 100% {margin-left:0;}
	10%, 30%, 50%, 70%, 90% {margin-left:-10px;}
	20%, 40%, 60%, 80% {margin-left:10px;}
}

@keyframes shakeTouchUI {
	0%, 100% {margin-left:0;}
	10%, 30%, 50%, 70%, 90% {margin-left:-10px;}
	20%, 40%, 60%, 80% {margin-left:10px;}
}
