Improve livechat title alignment

Improve livechat title alignment

@import "_variables.less";
@import "utils/_lesshat.import.less";
@import "utils/_reset.import.less";
@import "utils/_keyframes.import.less";

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html, body {
	height: 100%;
}
body {
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
	font-size: 0.8rem;
	color: @primary-font-color;
	height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	line-height: 1rem;
	padding: 0;
	overflow: hidden;
	position: relative;
	// background-color: @primary-background-color;

	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 5px;
	margin: 5px 0;
	border: 1px solid #E7E7E7;
	border-radius: 5px;
	outline: none;
}

button {
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
	cursor: pointer;
	text-transform: inherit;
	color: inherit;
	font-style: inherit;
}

input:focus {
	outline: none;
	box-shadow: 0 0 0;
}

.button {
	&:extend(.unselectable);
	display: inline-block;
	padding: 9px 12px;
	font-weight: 500;
	font-size: 13px;
	margin: 4px;
	text-transform: uppercase;
	word-spacing: 0;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
	border: none;
	border-radius: 0;
	line-height: 16px;
	position: relative;
	cursor: pointer;background-color: #FFF;
	color: rgba(255, 255, 255, 0.85);
	background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
	span {
		position: relative;
		z-index: 2;
	}
	&:before {
		background-color: rgba(0, 0, 0, 0.1);
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1;
		.transition(opacity .1s ease-out);
	}
	&:hover {
		text-decoration: none;
		color: #FFF;
		&:before {
			opacity: 1;
		}
	}
	&.secondary {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
		&:before {
			background-color: rgba(0, 0, 0, 0.045);
		}
	}
	&.clean {
		font-size: 14px;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
		&.primary {
			font-weight: 600;
		}
	}
	&.button-block {
		display: block;
		width: 100%;
	}
}

.field-error {
	border: 1px solid red;
}

.livechat-room {
	display: flex;
	flex-direction: column;
	height: 100%;

	border-top-right-radius: inherit;
	border-top-left-radius: inherit;

	.title {
		flex: 1 0 @header-min-height;

		line-height: @header-min-height;

		border-top-right-radius: inherit;
		border-top-left-radius: inherit;
		color: #FFF;
		z-index: 10;
		cursor: pointer;
		h1 {
			margin: 0;
			padding: 0 10px;
			font-size: 10pt;
			display: inline-block;
		}

		.toolbar {
			display: inline-block;
			float: right;
			padding-right: 5px;
			padding-top: 3px;
			height: 30px;

			svg {
				cursor: pointer;
				fill: currentColor;
				width: 14px;
				margin: 0 2px;
			}
		}
	}

	&.popout {
		border-top-right-radius: 0;
		border-top-left-radius: 0;

		.title {
			cursor: default;
		}
	}

	.messages {
		flex: 1 1 100%;

		background-color: #FFF;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;
		overflow-y: auto;
		.wrapper {
			padding-bottom: 6px;

			ul {
				list-style-type: none;
				padding: 0;
				li {
					padding: 0;
				}
			}

			.message {
				font-size: 12px;
				padding-left: 40px;
				position: relative;
				line-height: 18px;
				margin: 12px 10px 0;
				min-height: 36px;
				&:nth-child(1) {
					margin-top: 0;
				}
				&.new-day {
					margin-top: 60px;
				}
				&.new-day {
					&:before {
						content: attr(data-date);
						display: block;
						position: absolute;
						top: -30px;
						left: 0;
						font-size: 10px;
						font-weight: 600;
						text-align: center;
						.calc(left, ~'50% - 70px');
						color: @secondary-font-color;
						z-index: 10;
						padding: 0 10px;
						background-color: #FFF;
						min-width: 120px;
					}
					&:after {
						content: " ";
						display: block;
						position: absolute;
						top: -20px;
						left: 0;
						width: 100%;
						border-top: 1px solid #ddd;
					}
				}
				.edit-message {
					display: none;
					cursor: pointer;
				}
				&.own:hover:not(.system) .edit-message {
					display: inline-block;
				}
				.delete-message {
					display: none;
					cursor: pointer;
				}
				&.own:hover:not(.system) .delete-message {
					display: inline-block;
				}
				.user {
					display: inline-block;
					font-weight: 600;
					color: #444444;
					margin-right: 5px;
					outline: none;
					&:hover {
						color: #333;
					}
				}
				.thumb {
					position: absolute;
					left: 0;
					top: 0;
					display: block;
					width: 30px;
					height: 30px;
				}
				.info {
					font-size: 10px;
					color: @info-font-color;
				}
				&.sequential {
					// margin-top: 5px;
					padding-top: 5px;
					margin-top: 0;
					margin-bottom: 0;
					min-height: 20px;
					.user {
						display: none;
					}
					.thumb {
						display: none;
					}
					.info {
						position: absolute;
						text-align: right;
						left: -20px;
						width: 55px;
						.time {
							display: none;
						}
						.edited {
							display: inline-block;
						}
						.edit-message {
							float: left;
							margin-left: 1px;
						}
						.delete-message {
							float: left;
						}
					}
					&:hover {
						.time {
							display: inline-block;
						}
						.edited {
							display: none;
						}
					}
				}
				&.system {
					.body {
						color: @info-font-color;
						font-style: italic;
						em {
							font-weight: 600;
						}
					}
				}
				.avatar-initials {
					line-height: 40px;
				}
				a {
					color: @link-font-color;
					font-weight: 400;
					&:hover {
						color: darken(@link-font-color, 10%);
						text-decoration: underline;
					}
				}
				.body {
					opacity: 1;
					.transition(opacity 1s linear);
				}
				&.temp .body {
					opacity: .5;
				}
				&.msg-error .body {
					text-decoration: line-through;
				}

				.avatar .avatar-image {
					height: 100%;
					width: 100%;
					min-height: 20px;
					min-width: 20px;
					display: block;
					position: relative;
					background-color: transparent;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					border-radius: 4px;
				}
			}
		}
		.new-message {
			margin: 0 -65px;
			position: absolute;
			background: #428bca;
			border-radius: 20px;
			width: 130px;
			height: 30px;
			text-align: center;
			color: #FFF;
			line-height: 30px;
			font-size: 0.8em;
			cursor: pointer;
			bottom: 8px;
			left: 50%;
			z-index: 5;
			.transition(transform 0.3s ease-out);
			.transform(translateY(-40px));
			&.not {
				.transform(translateY(100%));
			}
		}

		.error {
			bottom: @footer-min-height;
			position: fixed;
			width: 100%;
			background-color: #F7D799;
			padding: 5px;
			z-index: 8;

			.transition(transform 0.2s ease-out);
			.transform(translateY(100%));

			&.show {
				.transform(translateY(0));
			}
		}
	}
	.footer {
		flex: 1 0 @footer-min-height;

		z-index: 10;

		background-color: #FCFCFC;
		border-top: 1px solid #E7E7E7;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;

		.message-bar {
			display: flex;
			flex-direction: row;
			padding-top: 6px;

			.input-wrapper {
				flex-grow: 1;
				padding-left: 6px;

				textarea {
					display: block;
					padding: 6px 8px;
					padding-right: 38px;
					overflow-y: auto;
					resize: none;
					margin: 0;
					max-height: 200px;
					width: 100%;
					font-size: 12px;
					-webkit-appearance: none;
					height: 28px;
					line-height: normal;
					background-color: #fff;
					position: relative;
				}
			}

			.buttons {
				color: @secondary-font-color;
				fill: @secondary-font-color;

				display: flex;
				align-items: center;
				padding: 0 5px;

				svg {
					width: 15px;
					height: 15px;
					margin: 0 4px;
					cursor: pointer;
					.transition(fill .15s ease-out);

					&:hover {
						fill: @primary-font-color;
					}
				}
			}
		}
		.toggle-options {
			clear: both;
			color: @secondary-font-color;
			margin-left: 6px;
			outline: none;
			margin-top: 5px;
			font-size: 0.65rem;
		}

		.typing {
			clear: both;
			color: @secondary-font-color;
			margin-left: 8px;
			outline: none;
			margin-top: 2px;
			font-size: 0.65rem;
		}

		.options-menu {
			min-width: 100px;
			// min-height: 40px;
			bottom: 21px;
			left: 6px;
			border-radius: 2px;
			padding: 6px 0;
			background-color: #fff;
			color: @secondary-font-color;

			box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,.16);
			position: absolute;
			z-index: 200;

			.transition(transform 0.15s ease, visibility 0.15s ease, opacity 0.15s ease);

			.transform(translateY(30px));
			opacity: 0;
			visibility: hidden;

			&.show {
				.transform(translateY(0px));
				opacity: 1;
				display: block;
				visibility: visible;
			}

			ul {
				li {
					padding: 0 13px 0 8px;
					&:hover {
						background-color: #EEE;
					}
					button {
						display: block;
						padding: 4px 2px;
						outline: none;
					}
				}
			}
		}
	}
	.offline {
		flex: 1 1 100%;
		background-color: white;
		padding: 1em 10px;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;

		.offline-message {
			padding: 1em 0;
		}

		.message-sent {
			text-align: center;
		}

		form {
			input, textarea {
				display: block;
				width: 100%;
			}

			.buttons {
				text-align: center;
			}

			.error {
				display: none;
				background-color: #F7D799;
				padding: 5px;

				&.show {
					display: block;
				}
			}
		}
	}
}

.livechat-form {
	flex: 1 1 100%;
	display: block;
	background-color: #FFF;
	border-left: 1px solid @window-border-color;
	border-right: 1px solid @window-border-color;
	padding: 5px;

	input, select {
		display: block;
		background-color: #FFF;
	}

	.error {
		display: none;
		// width: 100%;
		background-color: #F7D799;
		padding: 5px;

		// .transition(transform 0.3s ease-out);
		// .transform(translateY(-100%));

		&.show {
			display: block;
			// .transform(translateY(0px));
		}
	}

	form {
		padding: 0 1em;
		text-align: center;

		input, select {
			width: 100%;
		}
	}
}

.modal {
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;

	.overlay {
		border-top-right-radius: inherit;
		border-top-left-radius: inherit;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 9990;
		top: 0;
		left: 0;
	}

	.wrapper {
		z-index: 9999;
		background: white;
		position: fixed;
		height: 80%;
		width: 80%;
		top: 15%;
		left: 10%;
		border-radius: 6px;
		display: flex;
		flex-direction: column;

		header {
			flex: 1 0 40px;
			padding: 0 15px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			line-height: 40px;

			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.content {
			overflow-y: auto;
			padding: 10px;
			flex: 1 1 100%;

			.instructions {
				margin-top: 5px;
			}

			.survey-item {
				margin-top: 20px;

				.question {
					display: block;
				}

				.answer {
					margin-right: 5px;
					display: inline-block;
					text-align: center;
				}
			}
		}

		footer {
			flex: 1 0 60px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			line-height: 60px;
			text-align: right;
			padding-right: 20px;
		}
	}
}

.powered-by {
	margin-top: -20px;
	line-height: 20px;
	right: 0;
	z-index: 10;
	text-align: right;
	font-size: 0.65rem;
	height: 20px;
	color: #666;
	padding: 0 1em;
	opacity: 0.5;
	align-self: flex-end;

	.transition(opacity .15s ease-out);

	&:hover {
		opacity: 1;
	}

	a {
		text-decoration: none;
		margin-left: 1px;
		img {
			height: 14px;
			vertical-align: middle;
		}
	}
}

.sweet-overlay {
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}

.video-call {
	position: fixed;
	top: @header-min-height;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	z-index: 11;

	.video-overlay {
		position: fixed;
		top: @header-min-height;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 13;

		.toolbar {
			position: absolute;
			bottom: 40px;
			width: 100%;
			text-align: center;
			opacity: 0;
			visibility: hidden;
			.transform(translateY(50px));

			.transition(opacity 0.175s ease-out, transform 0.175s ease-out, visibility 0.175s ease-out);

			&.visible {
				opacity: 1;
				visibility: visible;
				.transform(translateY(0px));
			}

			.end-call {
				background-color: red;
				fill: white;
				border-radius: 50%;
				height: 60px;
				width: 60px;
				text-align: center;
				outline: none;

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

	.container {
		z-index: 12;
	}
}

@media all and(max-height: 200px) {
	.livechat-room {
		.title {
			height: 100%;
		}
		.footer {
			display: none;
		}
		.messages {
			display: none;
		}
		.powered-by {
			display: none;
		}
	}
}

@import "_variables.less";
@import "utils/_lesshat.import.less";
@import "utils/_reset.import.less";
@import "utils/_keyframes.import.less";

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html, body {
	height: 100%;
}
body {
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
	font-size: 0.8rem;
	color: @primary-font-color;
	height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	line-height: 1rem;
	padding: 0;
	overflow: hidden;
	position: relative;
	// background-color: @primary-background-color;

	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 5px;
	margin: 5px 0;
	border: 1px solid #E7E7E7;
	border-radius: 5px;
	outline: none;
}

button {
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
	cursor: pointer;
	text-transform: inherit;
	color: inherit;
	font-style: inherit;
}

input:focus {
	outline: none;
	box-shadow: 0 0 0;
}

.button {
	&:extend(.unselectable);
	display: inline-block;
	padding: 9px 12px;
	font-weight: 500;
	font-size: 13px;
	margin: 4px;
	text-transform: uppercase;
	word-spacing: 0;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
	border: none;
	border-radius: 0;
	line-height: 16px;
	position: relative;
	cursor: pointer;background-color: #FFF;
	color: rgba(255, 255, 255, 0.85);
	background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
	span {
		position: relative;
		z-index: 2;
	}
	&:before {
		background-color: rgba(0, 0, 0, 0.1);
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1;
		.transition(opacity .1s ease-out);
	}
	&:hover {
		text-decoration: none;
		color: #FFF;
		&:before {
			opacity: 1;
		}
	}
	&.secondary {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
		&:before {
			background-color: rgba(0, 0, 0, 0.045);
		}
	}
	&.clean {
		font-size: 14px;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
		&.primary {
			font-weight: 600;
		}
	}
	&.button-block {
		display: block;
		width: 100%;
	}
}

.field-error {
	border: 1px solid red;
}

.livechat-room {
	display: flex;
	flex-direction: column;
	height: 100%;

	border-top-right-radius: inherit;
	border-top-left-radius: inherit;

	.title {
		flex: 1 0 @header-min-height;

		line-height: @header-min-height;

		border-top-right-radius: inherit;
		border-top-left-radius: inherit;
		color: #FFF;
		z-index: 10;
		cursor: pointer;
		h1 {
			margin: 0;
			padding: 0 5px;
			font-size: 9pt;
			display: inline-block;
		}

		.toolbar {
			display: inline-block;
			float: right;
			padding-right: 5px;

			svg {
				cursor: pointer;
				fill: currentColor;
				width: 14px;
				margin: 0 2px;
				vertical-align: middle;
			}
		}
	}

	&.popout {
		border-top-right-radius: 0;
		border-top-left-radius: 0;

		.title {
			cursor: default;
		}
	}

	.messages {
		flex: 1 1 100%;

		background-color: #FFF;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;
		overflow-y: auto;
		.wrapper {
			padding-bottom: 6px;

			ul {
				list-style-type: none;
				padding: 0;
				li {
					padding: 0;
				}
			}

			.message {
				font-size: 12px;
				padding-left: 40px;
				position: relative;
				line-height: 18px;
				margin: 12px 10px 0;
				min-height: 36px;
				&:nth-child(1) {
					margin-top: 0;
				}
				&.new-day {
					margin-top: 60px;
				}
				&.new-day {
					&:before {
						content: attr(data-date);
						display: block;
						position: absolute;
						top: -30px;
						left: 0;
						font-size: 10px;
						font-weight: 600;
						text-align: center;
						.calc(left, ~'50% - 70px');
						color: @secondary-font-color;
						z-index: 10;
						padding: 0 10px;
						background-color: #FFF;
						min-width: 120px;
					}
					&:after {
						content: " ";
						display: block;
						position: absolute;
						top: -20px;
						left: 0;
						width: 100%;
						border-top: 1px solid #ddd;
					}
				}
				.edit-message {
					display: none;
					cursor: pointer;
				}
				&.own:hover:not(.system) .edit-message {
					display: inline-block;
				}
				.delete-message {
					display: none;
					cursor: pointer;
				}
				&.own:hover:not(.system) .delete-message {
					display: inline-block;
				}
				.user {
					display: inline-block;
					font-weight: 600;
					color: #444444;
					margin-right: 5px;
					outline: none;
					&:hover {
						color: #333;
					}
				}
				.thumb {
					position: absolute;
					left: 0;
					top: 0;
					display: block;
					width: 30px;
					height: 30px;
				}
				.info {
					font-size: 10px;
					color: @info-font-color;
				}
				&.sequential {
					// margin-top: 5px;
					padding-top: 5px;
					margin-top: 0;
					margin-bottom: 0;
					min-height: 20px;
					.user {
						display: none;
					}
					.thumb {
						display: none;
					}
					.info {
						position: absolute;
						text-align: right;
						left: -20px;
						width: 55px;
						.time {
							display: none;
						}
						.edited {
							display: inline-block;
						}
						.edit-message {
							float: left;
							margin-left: 1px;
						}
						.delete-message {
							float: left;
						}
					}
					&:hover {
						.time {
							display: inline-block;
						}
						.edited {
							display: none;
						}
					}
				}
				&.system {
					.body {
						color: @info-font-color;
						font-style: italic;
						em {
							font-weight: 600;
						}
					}
				}
				.avatar-initials {
					line-height: 40px;
				}
				a {
					color: @link-font-color;
					font-weight: 400;
					&:hover {
						color: darken(@link-font-color, 10%);
						text-decoration: underline;
					}
				}
				.body {
					opacity: 1;
					.transition(opacity 1s linear);
				}
				&.temp .body {
					opacity: .5;
				}
				&.msg-error .body {
					text-decoration: line-through;
				}

				.avatar .avatar-image {
					height: 100%;
					width: 100%;
					min-height: 20px;
					min-width: 20px;
					display: block;
					position: relative;
					background-color: transparent;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					border-radius: 4px;
				}
			}
		}
		.new-message {
			margin: 0 -65px;
			position: absolute;
			background: #428bca;
			border-radius: 20px;
			width: 130px;
			height: 30px;
			text-align: center;
			color: #FFF;
			line-height: 30px;
			font-size: 0.8em;
			cursor: pointer;
			bottom: 8px;
			left: 50%;
			z-index: 5;
			.transition(transform 0.3s ease-out);
			.transform(translateY(-40px));
			&.not {
				.transform(translateY(100%));
			}
		}

		.error {
			bottom: @footer-min-height;
			position: fixed;
			width: 100%;
			background-color: #F7D799;
			padding: 5px;
			z-index: 8;

			.transition(transform 0.2s ease-out);
			.transform(translateY(100%));

			&.show {
				.transform(translateY(0));
			}
		}
	}
	.footer {
		flex: 1 0 @footer-min-height;

		z-index: 10;

		background-color: #FCFCFC;
		border-top: 1px solid #E7E7E7;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;

		.message-bar {
			display: flex;
			flex-direction: row;
			padding-top: 6px;

			.input-wrapper {
				flex-grow: 1;
				padding-left: 6px;

				textarea {
					display: block;
					padding: 6px 8px;
					padding-right: 38px;
					overflow-y: auto;
					resize: none;
					margin: 0;
					max-height: 200px;
					width: 100%;
					font-size: 12px;
					-webkit-appearance: none;
					height: 28px;
					line-height: normal;
					background-color: #fff;
					position: relative;
				}
			}

			.buttons {
				color: @secondary-font-color;
				fill: @secondary-font-color;

				display: flex;
				align-items: center;
				padding: 0 5px;

				svg {
					width: 15px;
					height: 15px;
					margin: 0 4px;
					cursor: pointer;
					.transition(fill .15s ease-out);

					&:hover {
						fill: @primary-font-color;
					}
				}
			}
		}
		.toggle-options {
			clear: both;
			color: @secondary-font-color;
			margin-left: 6px;
			outline: none;
			margin-top: 5px;
			font-size: 0.65rem;
		}

		.typing {
			clear: both;
			color: @secondary-font-color;
			margin-left: 8px;
			outline: none;
			margin-top: 2px;
			font-size: 0.65rem;
		}

		.options-menu {
			min-width: 100px;
			// min-height: 40px;
			bottom: 21px;
			left: 6px;
			border-radius: 2px;
			padding: 6px 0;
			background-color: #fff;
			color: @secondary-font-color;

			box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,.16);
			position: absolute;
			z-index: 200;

			.transition(transform 0.15s ease, visibility 0.15s ease, opacity 0.15s ease);

			.transform(translateY(30px));
			opacity: 0;
			visibility: hidden;

			&.show {
				.transform(translateY(0px));
				opacity: 1;
				display: block;
				visibility: visible;
			}

			ul {
				li {
					padding: 0 13px 0 8px;
					&:hover {
						background-color: #EEE;
					}
					button {
						display: block;
						padding: 4px 2px;
						outline: none;
					}
				}
			}
		}
	}
	.offline {
		flex: 1 1 100%;
		background-color: white;
		padding: 1em 10px;
		border-left: 1px solid @window-border-color;
		border-right: 1px solid @window-border-color;

		.offline-message {
			padding: 1em 0;
		}

		.message-sent {
			text-align: center;
		}

		form {
			input, textarea {
				display: block;
				width: 100%;
			}

			.buttons {
				text-align: center;
			}

			.error {
				display: none;
				background-color: #F7D799;
				padding: 5px;

				&.show {
					display: block;
				}
			}
		}
	}
}

.livechat-form {
	flex: 1 1 100%;
	display: block;
	background-color: #FFF;
	border-left: 1px solid @window-border-color;
	border-right: 1px solid @window-border-color;
	padding: 5px;

	input, select {
		display: block;
		background-color: #FFF;
	}

	.error {
		display: none;
		// width: 100%;
		background-color: #F7D799;
		padding: 5px;

		// .transition(transform 0.3s ease-out);
		// .transform(translateY(-100%));

		&.show {
			display: block;
			// .transform(translateY(0px));
		}
	}

	form {
		padding: 0 1em;
		text-align: center;

		input, select {
			width: 100%;
		}
	}
}

.modal {
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;

	.overlay {
		border-top-right-radius: inherit;
		border-top-left-radius: inherit;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 9990;
		top: 0;
		left: 0;
	}

	.wrapper {
		z-index: 9999;
		background: white;
		position: fixed;
		height: 80%;
		width: 80%;
		top: 15%;
		left: 10%;
		border-radius: 6px;
		display: flex;
		flex-direction: column;

		header {
			flex: 1 0 40px;
			padding: 0 15px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			line-height: 40px;

			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.content {
			overflow-y: auto;
			padding: 10px;
			flex: 1 1 100%;

			.instructions {
				margin-top: 5px;
			}

			.survey-item {
				margin-top: 20px;

				.question {
					display: block;
				}

				.answer {
					margin-right: 5px;
					display: inline-block;
					text-align: center;
				}
			}
		}

		footer {
			flex: 1 0 60px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			line-height: 60px;
			text-align: right;
			padding-right: 20px;
		}
	}
}

.powered-by {
	margin-top: -20px;
	line-height: 20px;
	right: 0;
	z-index: 10;
	text-align: right;
	font-size: 0.65rem;
	height: 20px;
	color: #666;
	padding: 0 1em;
	opacity: 0.5;
	align-self: flex-end;

	.transition(opacity .15s ease-out);

	&:hover {
		opacity: 1;
	}

	a {
		text-decoration: none;
		margin-left: 1px;
		img {
			height: 14px;
			vertical-align: middle;
		}
	}
}

.sweet-overlay {
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}

.video-call {
	position: fixed;
	top: @header-min-height;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	z-index: 11;

	.video-overlay {
		position: fixed;
		top: @header-min-height;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 13;

		.toolbar {
			position: absolute;
			bottom: 40px;
			width: 100%;
			text-align: center;
			opacity: 0;
			visibility: hidden;
			.transform(translateY(50px));

			.transition(opacity 0.175s ease-out, transform 0.175s ease-out, visibility 0.175s ease-out);

			&.visible {
				opacity: 1;
				visibility: visible;
				.transform(translateY(0px));
			}

			.end-call {
				background-color: red;
				fill: white;
				border-radius: 50%;
				height: 60px;
				width: 60px;
				text-align: center;
				outline: none;

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

	.container {
		z-index: 12;
	}
}

@media all and(max-height: 200px) {
	.livechat-room {
		.title {
			height: 100%;
		}
		.footer {
			display: none;
		}
		.messages {
			display: none;
		}
		.powered-by {
			display: none;
		}
	}
}


:fire: bullets

:fire: bullets

I just wanted to use that commit message, ok?  Don't judge meeee.

@import 'variables';

.github-IssueishDetailView {
  padding: @component-padding * 3;
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 1.166666em;
  line-height: 1.5;
  background-color: @base-background-color;

  &-tablist {
    display: flex;
    justify-content: space-around;
    list-style: none;
  }

  &-container {
    max-width: 48em;
    margin: 0 auto;
  }

  // Header ------------------------

  &-header {
    border: 1px solid @base-border-color;
    border-radius: @component-border-radius;
  }

  &-headerRow {
    display: flex; // TODO: Use grid
    justify-content: space-between;
    margin: @component-padding;
  }

  &-headerGroup {
    display: flex;
    align-items: center;
  }

  &-headerBadge {
    margin-right: @component-padding;
    padding: 0 0.75em;
    line-height: 2em;
  }

  &-headerLink {
    color: @text-color-subtle;
  }

  &-headerStatus {
    margin-left: @component-padding;
  }

  // Checkout button -----------------------

  &-checkoutButton {
    margin-left: @component-padding;
  }

  // Refresh Button ------------------------

  &-headerRefreshButton {
    align-self: flex-start;
    color: @text-color-subtle;
    cursor: pointer;

    &::before {
      display: block;
      width: 16px;
      height: 16px;
      line-height: .9;
      margin-right: 0;
      text-align: center;
    }
    &.refreshing::before {
      @keyframes github-IssueishDetailView-headerRefreshButtonAnimation {
        100% { transform: rotate(360deg); }
      }
      animation: github-IssueishDetailView-headerRefreshButtonAnimation 2s linear 30; // limit to 1min in case something gets stuck
    }
  }

  // Avatar and title ------------------------

  &-avatar {
    align-self: flex-start;
    margin-right: @component-padding;
  }

  &-avatarImage {
    width: 32px;
    height: 32px;
    border-radius: @component-border-radius;
  }

  &-title {
    display: inline-block;
    margin: 0;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.3;
    color: @text-color-highlight;
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  // Reactions ------------------------

  &-reactions {
    padding-top: @component-padding*3;
    border-top: 1px solid @base-border-color;

    &:empty {
      display: none;
    }

    &Group {
      margin-right: @component-padding*2;
    }
  }

  // Meta ------------------------

  &-meta {
    font-size: .95em;
    color: @text-color-subtle;

    &Author {
      color: inherit;
    }
  }

  // Build Status ------------------------

  &-buildStatus {
    margin: @component-padding*3 0;

    &:empty {
      display: none;
    }
  }

  // PR body ------------------------

  &-container > .github-DotComMarkdownHtml {
    margin: @component-padding*3 0;
  }

  // Footer ------------------------

  &-footer {
    margin-top: @component-padding * 3;
    text-align: center;
    &Link.icon {
      color: @text-color-subtle;
      &:before {
        vertical-align: -2px;
      }
    }
  }

}

// Dock Overrides ------------------------
// When the IssueishDetailView is shown as a Dock item

atom-dock .github-IssueishDetailView {
  padding: @component-padding;
  font-size: @font-size;
  background-color: @tool-panel-background-color;

  &-header {
    margin-bottom: @component-padding*1.5;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  &-headerGroup {
    margin: 0;
  }

  &-avatarImage {
    width: 24px;
    height: 24px;
    border-radius: @component-border-radius;
  }

  &-title {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.3;
  }

  &-reactions {
    padding-top: @component-padding;
  }

  &-buildStatus {
    margin: @component-padding 0;

    &:empty {
      display: none;
    }
  }

  .github-PrTimeline {
    margin-top: @component-padding;
  }

  .timeline-item {
    margin: 0;
    padding: @component-padding*1.5 0;
  }

  .pre-timeline-item-icon {
    position: relative;
    margin: 0;
    &:before {
      vertical-align: middle;
    }
  }

  &-container > .github-DotComMarkdownHtml {
    margin: @component-padding 0;
  }

}

atom-dock .github-PrStatuses {
  &-header,
  &-list-item {
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
  }
}

@import 'variables';

.github-IssueishDetailView {
  padding: @component-padding * 3;
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 1.166666em;
  line-height: 1.5;
  background-color: @base-background-color;

  &-tablist {
    display: flex;
    justify-content: space-around;
  }

  &-container {
    max-width: 48em;
    margin: 0 auto;
  }

  // Header ------------------------

  &-header {
    border: 1px solid @base-border-color;
    border-radius: @component-border-radius;
  }

  &-headerRow {
    display: flex; // TODO: Use grid
    justify-content: space-between;
    margin: @component-padding;
  }

  &-headerGroup {
    display: flex;
    align-items: center;
  }

  &-headerBadge {
    margin-right: @component-padding;
    padding: 0 0.75em;
    line-height: 2em;
  }

  &-headerLink {
    color: @text-color-subtle;
  }

  &-headerStatus {
    margin-left: @component-padding;
  }

  // Checkout button -----------------------

  &-checkoutButton {
    margin-left: @component-padding;
  }

  // Refresh Button ------------------------

  &-headerRefreshButton {
    align-self: flex-start;
    color: @text-color-subtle;
    cursor: pointer;

    &::before {
      display: block;
      width: 16px;
      height: 16px;
      line-height: .9;
      margin-right: 0;
      text-align: center;
    }
    &.refreshing::before {
      @keyframes github-IssueishDetailView-headerRefreshButtonAnimation {
        100% { transform: rotate(360deg); }
      }
      animation: github-IssueishDetailView-headerRefreshButtonAnimation 2s linear 30; // limit to 1min in case something gets stuck
    }
  }

  // Avatar and title ------------------------

  &-avatar {
    align-self: flex-start;
    margin-right: @component-padding;
  }

  &-avatarImage {
    width: 32px;
    height: 32px;
    border-radius: @component-border-radius;
  }

  &-title {
    display: inline-block;
    margin: 0;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.3;
    color: @text-color-highlight;
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  // Reactions ------------------------

  &-reactions {
    padding-top: @component-padding*3;
    border-top: 1px solid @base-border-color;

    &:empty {
      display: none;
    }

    &Group {
      margin-right: @component-padding*2;
    }
  }

  // Meta ------------------------

  &-meta {
    font-size: .95em;
    color: @text-color-subtle;

    &Author {
      color: inherit;
    }
  }

  // Build Status ------------------------

  &-buildStatus {
    margin: @component-padding*3 0;

    &:empty {
      display: none;
    }
  }

  // PR body ------------------------

  &-container > .github-DotComMarkdownHtml {
    margin: @component-padding*3 0;
  }

  // Footer ------------------------

  &-footer {
    margin-top: @component-padding * 3;
    text-align: center;
    &Link.icon {
      color: @text-color-subtle;
      &:before {
        vertical-align: -2px;
      }
    }
  }

}

// Dock Overrides ------------------------
// When the IssueishDetailView is shown as a Dock item

atom-dock .github-IssueishDetailView {
  padding: @component-padding;
  font-size: @font-size;
  background-color: @tool-panel-background-color;

  &-header {
    margin-bottom: @component-padding*1.5;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  &-headerGroup {
    margin: 0;
  }

  &-avatarImage {
    width: 24px;
    height: 24px;
    border-radius: @component-border-radius;
  }

  &-title {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.3;
  }

  &-reactions {
    padding-top: @component-padding;
  }

  &-buildStatus {
    margin: @component-padding 0;

    &:empty {
      display: none;
    }
  }

  .github-PrTimeline {
    margin-top: @component-padding;
  }

  .timeline-item {
    margin: 0;
    padding: @component-padding*1.5 0;
  }

  .pre-timeline-item-icon {
    position: relative;
    margin: 0;
    &:before {
      vertical-align: middle;
    }
  }

  &-container > .github-DotComMarkdownHtml {
    margin: @component-padding 0;
  }

}

atom-dock .github-PrStatuses {
  &-header,
  &-list-item {
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
  }
}


Add label styles

Add label styles

with bootstrap patterns

//
// Labels
// --------------------------------------------------

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;

  // Add hover effects, but only for links
  &[href] {
    &:hover,
    &:focus {
      color: @label-link-hover-color;
      text-decoration: none;
      cursor: pointer;
    }
  }

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
  .label-variant(@label-default-bg);
}

.label-primary {
  .label-variant(@label-primary-bg);
}

.label-success {
  .label-variant(@label-success-bg);
}

.label-info {
  .label-variant(@label-info-bg);
}

.label-warning {
  .label-variant(@label-warning-bg);
}

.label-danger {
  .label-variant(@label-danger-bg);
}

error: pathspec 'cp-strap/src/stylesheets/components/labels.less' did not match any file(s) known to git


ref(auth): Pull up background-size property in auth css

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/ifduyue/sentry.git/'


missing colon

missing colon

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/pradeepmurugesan/incubator-freemarker-docgen.git/'


onboarding.less created: onboarding related stuff here

   // omnibar plus
  #main-content-container .content [class^="icon-"], [class*=" icon-"] button {
    color: @highlight-button !important;
  }

error: pathspec 'frontend/core/src/main/webapp/static/less/onboarding.less' did not match any file(s) known to git


Remove unused style

Remove unused style

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aha-app/bigquery-log-viewer.git/'


Add pagination styles

Add pagination styles

with bootstrap patterns

//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: @line-height-computed 0;
  border-radius: @border-radius-base;

  > li {
    display: inline; // Remove list-style and block-level defaults
    > a,
    > span {
      position: relative;
      float: left; // Collapse white-space
      padding: @padding-base-vertical @padding-base-horizontal;
      line-height: @line-height-base;
      text-decoration: none;
      color: @pagination-color;
      background-color: @pagination-bg;
      border: 1px solid @pagination-border;
      margin-left: -1px;
    }
    &:first-child {
      > a,
      > span {
        margin-left: 0;
        .border-left-radius(@border-radius-base);
      }
    }
    &:last-child {
      > a,
      > span {
        .border-right-radius(@border-radius-base);
      }
    }
  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      color: @pagination-hover-color;
      background-color: @pagination-hover-bg;
      border-color: @pagination-hover-border;
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 2;
      color: @pagination-active-color;
      background-color: @pagination-active-bg;
      border-color: @pagination-active-border;
      cursor: default;
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: @pagination-disabled-color;
      background-color: @pagination-disabled-bg;
      border-color: @pagination-disabled-border;
      cursor: not-allowed;
    }
  }
}

// Sizing
// --------------------------------------------------

// Large
.pagination-lg {
  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
}

// Small
.pagination-sm {
  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
}

error: pathspec 'cp-strap/src/stylesheets/components/pagination.less' did not match any file(s) known to git


feat(mainstenant variables): add custom accent color

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Mainstenant/allons-y.git/'


Prevent avatar and scores from being squashed

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.beatmapset-score-big {
  @_top: beatmapset-score-big;

  .default-border-radius();
  .default-box-shadow();

  display: flex;
  flex-direction: column;

  margin: (@spacing * 2) 0;

  &:hover {
    background-color: @grey-e;
  }

  &--first-score {
    box-shadow: 0 0 0 3px @yellow, 0 4px @box-shadow-spread @box-shadow-color;
  }

  &__section {
    width: 100%;

    &--top {
      display: flex;

      height: 65px;
      align-self: flex-start;
    }

    &--bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      height: 25px;
      align-self: flex-end;
      background-color: @grey-e;

      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &__position {
    min-width: 60px;
    flex: none;

    font-size: 25px;
    font-style: italic;
    font-weight: 700;

    padding-left: @spacing * 2;
    padding-right: @spacing;

    align-self: center;

    .@{_top}--first-score & {
      color: @yellow-dark;
    }
  }

  &__avatar {
    z-index: 1;
    margin-right: @spacing;
    margin-top: @spacing;
    flex: none;
  }

  &__user-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    margin-right: auto;

    padding-bottom: @spacing;
  }

  &__username {
    font-size: 17px;
    font-style: italic;
    font-weight: 700;

    padding-bottom: @spacing * 0.5;

    color: @blue-darker;
  }

  &__stats-box {
    display: flex;
    flex: none;
    align-items: flex-end;
    justify-content: flex-end;

    margin-left: auto;

    padding-top: @spacing * 2;
    padding-bottom: @spacing;

    padding-right: @spacing * 2;
  }

  &__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding-left: @spacing * 2;
  }

  &__stat-header {
    font-size: 11px;
    font-weight: 700;

    padding-bottom: @spacing * 0.2;
  }

  &__stat-value {
    font-size: 25px;
    font-weight: 300;
    font-style: italic;
    color: @purple-dark;

    line-height: 0.9;

    &--score {
      font-weight: 500;
    }
  }

  &__rank {
    width: 30px;
    height: 30px;

    margin-left: @spacing;
  }

  &__achieved {
    font-size: 12px;
    color: @grey-7;

    padding-right: @spacing * 2;

    align-self: center;
  }
}

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.beatmapset-score-big {
  @_top: beatmapset-score-big;

  .default-border-radius();
  .default-box-shadow();

  display: flex;
  flex-direction: column;

  margin: (@spacing * 2) 0;

  &:hover {
    background-color: @grey-e;
  }

  &--first-score {
    box-shadow: 0 0 0 3px @yellow, 0 4px @box-shadow-spread @box-shadow-color;
  }

  &__section {
    width: 100%;

    &--top {
      display: flex;

      height: 65px;
      align-self: flex-start;
    }

    &--bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      height: 25px;
      align-self: flex-end;
      background-color: @grey-e;

      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &__position {
    min-width: 60px;
    flex: none;

    font-size: 25px;
    font-style: italic;
    font-weight: 700;

    padding-left: @spacing * 2;
    padding-right: @spacing;

    align-self: center;

    .@{_top}--first-score & {
      color: @yellow-dark;
    }
  }

  &__avatar {
    z-index: 1;
    margin-right: @spacing;
    margin-top: @spacing;
  }

  &__user-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    margin-right: auto;

    padding-bottom: @spacing;
  }

  &__username {
    font-size: 17px;
    font-style: italic;
    font-weight: 700;

    padding-bottom: @spacing * 0.5;

    color: @blue-darker;
  }

  &__stats-box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    margin-left: auto;

    padding-top: @spacing * 2;
    padding-bottom: @spacing;

    padding-right: @spacing * 2;
  }

  &__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding-left: @spacing * 2;
  }

  &__stat-header {
    font-size: 11px;
    font-weight: 700;

    padding-bottom: @spacing * 0.2;
  }

  &__stat-value {
    font-size: 25px;
    font-weight: 300;
    font-style: italic;
    color: @purple-dark;

    line-height: 0.9;

    &--score {
      font-weight: 500;
    }
  }

  &__rank {
    width: 30px;
    height: 30px;

    margin-left: @spacing;
  }

  &__achieved {
    font-size: 12px;
    color: @grey-7;

    padding-right: @spacing * 2;

    align-self: center;
  }
}


Removed vertical-align middle from sortable to prevent jumping

// Name:            Sortable
// Description:     Defines styles for sortable nested lists
//
// Component:       `uk-sortable`
//
// Sub-objects:     `uk-sortable-list`
//                  `uk-sortable-item`
//                  `uk-sortable-placeholder`
//                  `uk-sortable-empty`
//                  `uk-sortable-handle`
//                  `uk-sortable-moving`
//                  `[data-sortable-action='toggle']`
//
// Modifier:        `uk-sortable-list-dragged`
//
// States:          `uk-parent`
//                  `uk-collapsed`
//
// ========================================================================

@import "../../../src/less/variables.less";

// Variables
// ========================================================================

@sortable-padding-left:                         40px;
@sortable-dragged-z-index:                      1040;

@sortable-item-margin-bottom:                   10px;
@sortable-item-padding:                         5px;
@sortable-item-background:                      #f5f5f5;

@sortable-placeholder-border:                   #ddd;

@sortable-handle-font-size:                     18px;
@sortable-handle-color:                         #ddd;
@sortable-handle-icon:                          "\f0c9";

@sortable-toggle-color:                         #999;
@sortable-toggle-hover-color:                   #444;
@sortable-toggle-icon:                          "\f147";
@sortable-toggle-collapsed-icon:                "\f196";

/* ========================================================================
   Addon: Sortable
 ========================================================================== */

.uk-sortable {
    padding: 0;
    list-style: none;
    .hook-sortable;
}

/* Sub-object `uk-sortable-list`
 ========================================================================== */

.uk-sortable-list {
    margin: 0;
    padding-left: @sortable-padding-left;
    list-style: none;
}

/* Sub-modifier `uk-sortable-list-dragged`
 ========================================================================== */

.uk-sortable-list-dragged {
    position: absolute;
    z-index: @sortable-dragged-z-index;
    padding-left: 0;
    pointer-events: none;
    .hook-sortable-list-dragged;
}

/* Sub-object `uk-sortable-item`
 ========================================================================== */

.uk-sortable-item {
    margin-bottom: @sortable-item-margin-bottom;
    padding: @sortable-item-padding;
    background: @sortable-item-background;
    .hook-sortable-item;
}

/* Sub-object `uk-sortable-placeholder`
 * The placeholder which marks the drop area
 ========================================================================== */

.uk-sortable-placeholder {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: @sortable-item-margin-bottom;
    border: 1px dashed @sortable-placeholder-border;
    .hook-sortable-placeholder;
}

/* Sub-object `uk-sortable-empty`
 * The style of an empty list
 ========================================================================== */

.uk-sortable-empty {
    min-height: 40px;
    .hook-sortable-empty;
}

/* Sub-object `uk-sortable-handle`
 ========================================================================== */

.uk-sortable-handle {
    display: inline-block;
    font-size: @sortable-handle-font-size;
    color: @sortable-handle-color;
    .hook-sortable-handle;
}

/* Hover */
.uk-sortable-handle:hover { cursor: move; }

/* Icon */
.uk-sortable-handle:after {
    content: @sortable-handle-icon;
    font-family: FontAwesome;
}

/* Sub-object `uk-sortable-moving`
 ========================================================================== */

.uk-sortable-moving { cursor: move; }

/* Sub-object `[data-action='toggle']`
 ========================================================================== */

/* Hidden by default */
[data-sortable-action='toggle'] {
    display: inline-block;
    color: @sortable-toggle-color;
    visibility: hidden;
    .hook-sortable-toggle;
}

/* Hover */
[data-sortable-action='toggle']:hover {
    color: @sortable-toggle-hover-color;
    cursor: pointer;
}

/* Icon */
[data-sortable-action='toggle']:after {
    content: @sortable-toggle-icon;
    font-family: FontAwesome;
}

/*
 * Show if nested
 */

.uk-parent > .uk-sortable-item [data-sortable-action='toggle'] { visibility: visible; }

/*
 * Collapsed
 */

.uk-collapsed > .uk-sortable-item [data-sortable-action='toggle']:after { content: @sortable-toggle-collapsed-icon; }

.uk-collapsed .uk-sortable-list { display: none; }

// Hooks
// ========================================================================

.hook-sortable() {}
.hook-sortable-list-dragged() {}
.hook-sortable-item() {}
.hook-sortable-placeholder() {}
.hook-sortable-empty() {}
.hook-sortable-handle() {}
.hook-sortable-toggle() {}

// Name:            Sortable
// Description:     Defines styles for sortable nested lists
//
// Component:       `uk-sortable`
//
// Sub-objects:     `uk-sortable-list`
//                  `uk-sortable-item`
//                  `uk-sortable-placeholder`
//                  `uk-sortable-empty`
//                  `uk-sortable-handle`
//                  `uk-sortable-moving`
//                  `[data-sortable-action='toggle']`
//
// Modifier:        `uk-sortable-list-dragged`
//
// States:          `uk-parent`
//                  `uk-collapsed`
//
// ========================================================================

@import "../../../src/less/variables.less";

// Variables
// ========================================================================

@sortable-padding-left:                         40px;
@sortable-dragged-z-index:                      1040;

@sortable-item-margin-bottom:                   10px;
@sortable-item-padding:                         5px;
@sortable-item-background:                      #f5f5f5;

@sortable-placeholder-border:                   #ddd;

@sortable-handle-font-size:                     18px;
@sortable-handle-color:                         #ddd;
@sortable-handle-icon:                          "\f0c9";

@sortable-toggle-color:                         #999;
@sortable-toggle-hover-color:                   #444;
@sortable-toggle-icon:                          "\f147";
@sortable-toggle-collapsed-icon:                "\f196";

/* ========================================================================
   Addon: Sortable
 ========================================================================== */

.uk-sortable {
    padding: 0;
    list-style: none;
    .hook-sortable;
}

/* Sub-object `uk-sortable-list`
 ========================================================================== */

.uk-sortable-list {
    margin: 0;
    padding-left: @sortable-padding-left;
    list-style: none;
}

/* Sub-modifier `uk-sortable-list-dragged`
 ========================================================================== */

.uk-sortable-list-dragged {
    position: absolute;
    z-index: @sortable-dragged-z-index;
    padding-left: 0;
    pointer-events: none;
    .hook-sortable-list-dragged;
}

/* Sub-object `uk-sortable-item`
 ========================================================================== */

.uk-sortable-item {
    margin-bottom: @sortable-item-margin-bottom;
    padding: @sortable-item-padding;
    background: @sortable-item-background;
    .hook-sortable-item;
}

/* Sub-object `uk-sortable-placeholder`
 * The placeholder which marks the drop area
 ========================================================================== */

.uk-sortable-placeholder {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: @sortable-item-margin-bottom;
    border: 1px dashed @sortable-placeholder-border;
    .hook-sortable-placeholder;
}

/* Sub-object `uk-sortable-empty`
 * The style of an empty list
 ========================================================================== */

.uk-sortable-empty {
    min-height: 40px;
    .hook-sortable-empty;
}

/* Sub-object `uk-sortable-handle`
 ========================================================================== */

.uk-sortable-handle {
    display: inline-block;
    font-size: @sortable-handle-font-size;
    color: @sortable-handle-color;
    .hook-sortable-handle;
}

/* Hover */
.uk-sortable-handle:hover { cursor: move; }

/* Icon */
.uk-sortable-handle:after {
    content: @sortable-handle-icon;
    font-family: FontAwesome;
    vertical-align: middle;
}

/* Sub-object `uk-sortable-moving`
 ========================================================================== */

.uk-sortable-moving { cursor: move; }

/* Sub-object `[data-action='toggle']`
 ========================================================================== */

/* Hidden by default */
[data-sortable-action='toggle'] {
    display: inline-block;
    color: @sortable-toggle-color;
    visibility: hidden;
    .hook-sortable-toggle;
}

/* Hover */
[data-sortable-action='toggle']:hover {
    color: @sortable-toggle-hover-color;
    cursor: pointer;
}

/* Icon */
[data-sortable-action='toggle']:after {
    content: @sortable-toggle-icon;
    font-family: FontAwesome;
}

/*
 * Show if nested
 */

.uk-parent > .uk-sortable-item [data-sortable-action='toggle'] { visibility: visible; }

/*
 * Collapsed
 */

.uk-collapsed > .uk-sortable-item [data-sortable-action='toggle']:after { content: @sortable-toggle-collapsed-icon; }

.uk-collapsed .uk-sortable-list { display: none; }

// Hooks
// ========================================================================

.hook-sortable() {}
.hook-sortable-list-dragged() {}
.hook-sortable-item() {}
.hook-sortable-placeholder() {}
.hook-sortable-empty() {}
.hook-sortable-handle() {}
.hook-sortable-toggle() {}


little color fixes

little color fixes

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/VoiSmart/Rocket.Chat.git/'


Some grid view css adjustments

Some grid view css adjustments

// Gridview
// -------------------------

 .mceContentBody{
         overflow-y:hidden!important;
      }

 IFRAME {overflow:hidden;}

 // Sortabel
 // -------------------------
 .usky-grid .ui-sortable-helper  {
     border: dashed 1px #000 !important;
     background: #ccc;
     opacity: 0.4;
     height: 80px !important;
     width: 160px !important;
     overflow: hidden;
     padding: 5px;
     border-radius:5px;
     -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     -moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.45);
 }

 .usky-grid .ui-sortable-helper *{
     border: none !important;
     background: none !important;
     color: #999 !important;
     padding: 0 !important;
     margin: 0 !important;
 }

 .usky-grid .ui-sortable-helper .cell-tools{
     display: none !important;
 }

 .usky-grid .ui-sortable-placeholder{
     border: 2px dashed @grayLight;
     padding: 20px;
     font-family: icomoon;
     text-align: center;
     font-size: 85px;
     line-height: 65px;
     color: @grayLighter;
     vertical-align: middle;
 }

 .usky-grid .ui-sortable-placeholder:hover{
     border-color: @gray;
 }

 .usky-grid .ui-sortable-placeholder:before{
     content: "\e1bd";
 }

 // utils
 // -------------------------
 .usky-grid-width {
     margin: 20px auto;
     width:100%;
 }
 .usky-grid  .right {
     float:right;
 }

 // general layout components
 // -------------------------
 .usky-grid  .tb {
     width: 100%;
 }

 .usky-grid  .td {
     width: 100%;
     display: inline-block;
     vertical-align:top;
     border-right:1px dashed rgba(182, 182, 182, 0.0);
     box-sizing: border-box;
 }

 .usky-grid .tb:hover .td{
     border-right:1px dashed rgba(182, 182, 182, 0.3);
 }
 .usky-grid  .td.last {
     border-right:1px dashed rgba(182, 182, 182, 0.0) !important;
 }
 .usky-grid  .tr {
 }

 .usky-grid  .middle {
     text-align: center;
 }

 .usky-grid  .mainTb {
     border-collapse: separate;
 }
 .usky-grid  .mainTd {
     position:relative;
 }

 // COLUMN
 // -------------------------
 .usky-grid  .usky-column {

 }
 .usky-grid  .usky-column.last {

 }

 // ROW
 // -------------------------
.usky-grid .usky-row{
     position: relative;
     border: 1px dashed rgba(0,0,0,0);
}

.usky-grid .tb:hover .usky-row{
    border-bottom:1px dashed rgba(182, 182, 182, 0.3);
}

/*.usky-grid .selectedRow {
     border: 1px solid rgba(182, 182, 182, 0.3);
}*/

// CELL
// -------------------------
.usky-grid .usky-cell{
     position: relative;
     border: 1px dashed rgba(0,0,0,0);
}

.usky-grid  .cell-tools {
    transition: all .20s ease-in-out;
    -moz-transition: all .20s ease-in-out;
    -webkit-transition: all .20s ease-in-out;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    width: 150px;
    opacity: 0.3;
    z-index: 50;
}

.usky-grid .cell-tools:hover{
    opacity: 1;
}

.usky-grid  .cell-tools-add {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 0;
    right: 0;
}

.usky-grid  .usky-control:hover .cell-tools-add{
    opacity: 1;
}

.usky-grid  .cell-tools-remove {
    display:inline-block;
    position: absolute;
    top: 0px;
    right: 5px;
    text-align: right;
    z-index: 500;
}

.usky-grid .cell-tools-remove .iconBox:hover, .usky-grid .cell-tools-remove .iconBox:hover *{
    background: @red !important;
    border-color: @red !important;
}

.usky-grid  .cell-tools-move {
    display:inline-block;
    position: absolute;
    top: 33px;
    right: 5px;
    z-index: 500;
    cursor: move
}

.usky-grid .cell-tools-edit{
    position: absolute;
    top: 66px;
    right: 5px;
}

// CONTROL
// -------------------------
.usky-grid .usky-control {
    /*transition: all .20s ease-in-out;
    -moz-transition: all .20s ease-in-out;
    -webkit-transition: all .20s ease-in-out;*/
    position:relative;
    display:block;

    /*
    border: 1px dashed rgba(255, 0, 0, .0);
    border-bottom-width: 1px;
    */

    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

    margin: 10px 0 0 0;
}

.usky-grid  .usky-control:hover{
    /*border: 1px solid rgba(182, 182, 182, 0.3);*/
    //border-bottom: 1px solid rgba(182, 182, 182, 0.3);
}

.usky-grid  .usky-control-placeholder:hover{
    /*border: 1px solid rgba(182, 182, 182, 0);*/
    /*border-bottom:1px solid rgba(182, 182, 182, 0.0) !important;*/
}

.usky-grid .warnhighlight, .usky-grid  .td.last.warnhighlight{
     border: 1px dashed @red !important;
}

.usky-grid .infohighlight, .usky-grid  .td.last.infohighlight{
     border: 1px dashed @blue !important;
}

.usky-grid .usky-control-inner{
    min-height: 60px;
}

// CONTROL PLACEHOLDER
// -------------------------
.usky-grid  .usky-control-placeholder {
    min-height: 20px;
    position: relative;
    text-align: center;
    text-align: -moz-center;
    cursor: text;
}

.usky-grid  .usky-control-placeholder .placeholder{
    font-size: 14px; opacity: 0.7; text-align: left;
    padding: 5px;
    border:1px solid rgba(182, 182, 182, 0.3);
    height: 20px;
}

.usky-grid  .usky-control-placeholder:hover .placeholder{
    border:1px solid rgba(182, 182, 182, 0.8);
}

// EDITOR PLACEHOLDER
// -------------------------
.usky-grid .usky-editor-placeholder{
    min-height: 65px;
    padding: 20px;
    padding-bottom: 30px;
    position: relative;
    background-color: white;
    border: 4px dashed @grayLight;
    text-align: center;
    text-align: -moz-center;
}
.usky-grid .usky-editor-placeholder i{
    color: @grayLight;
    font-size: 85px;
    line-height: 85px;
    display: block;
    margin-bottom: 10px;
}

// Form elements
// -------------------------
 .usky-grid  textarea.textstring{
     display: block;
     overflow: hidden;
     border: none;
     background: #fff;
     outline: none;
     resize: none;
     color: @gray;
 }

.usky-grid .usky-cell-rte textarea{
     display: none !important
}

.usky-grid .usky-cell-media .caption{
     display: block;
     overflow: hidden;
     border: none;
     background: #fff;
     outline: none;
     width: 98%;
     resize: none;
     font-style: italic;
}

 .usky-grid  .cellPanelRte {
     min-height:60px;
 }

// ICONS
// -------------------------
 .usky-grid  .iconBox {
     padding: 4px 6px 4px 6px;
     display: inline-block;
     cursor: pointer;
     border-radius: 200px;
     background: rgba(255,255,255, 1);
     border:1px solid rgb(182, 182, 182);
     margin: 2px;
 }
 .usky-grid .iconBox:hover, .usky-grid .iconBox:hover *{
          background: @blue !important;
          color: white !important;
          border-color: @blue !important;
          text-decoration:none;
 }

 .usky-grid  .iconBox a:hover {
     text-decoration:none;
     color: white !important;
 }

 .usky-grid  .iconBox.selected {
     -webkit-appearance: none;
     background-image: -moz-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: -webkit-gradient(linear,0 0,0 100%,from(#e6e6e6),to(#bfbfbf));
     background-image: -webkit-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: -o-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: linear-gradient(to bottom,#e6e6e6,#bfbfbf);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6',endColorstr='#ffbfbfbf',GradientType=0);
     zoom: 1;
     border-color: #bfbfbf #bfbfbf #999;
     border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
     -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     background: transparent;
 }

 .usky-grid  .iconBox i {
     font-size:16px !important;
     color: #5F5F5F;
     display:block;
 }

 .usky-grid  ul {
     display:inline-block;
     list-style:none;
     padding:0;
     margin: 10px 0 0 0;
     text-align:center;
 }

 .usky-grid  .help-text {
     background: @grayLighter;
     color: @gray;
     font-size: 14px;
     padding: 10px 20px 10px 20px;
     border-radius: 15px;
     display: inline-block;
     clear: both;
 }

 .usky-grid  ul li {
     display: inline-block;
     width: 120px;
     margin: 8px 8px 0px 8px;
 }

 // TINYMCE EDITOR
 // -------------------------
 .usky-grid .mce-panel {
     border:none !important;
     clear:both;
 }

 .usky-grid .mce-btn button {
     padding: 8px 6px;
     line-height: inherit;
 }

 .usky-grid .mce-toolbar {
     border: 1px solid rgba(207, 207, 207, 0.7);
     background-color: rgba(250, 250, 250, 1);
     z-index: 100;
     display: inline-block;
     float: left;
     padding: -1px;
     position: absolute;
     margin: -1px -1px 0 -1px;
     -webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     -moz-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     z-index: 9999999;
 }

 .mce-flow-layout-item {
     margin: 0;
 }

 .usky-grid  .mce-panel {
     background: transparent !important;
 }
 .usky-grid  .mce-floatpanel {
     background-color: #F7F7F7 !important;
 }

 // MEDIA EDITOR
 // -------------------------
 .usky-grid  .fullSizeImage {
     width:100%
 }

 /**************************************************************************************************/
 /* Width */
 /**************************************************************************************************/

 .usky-grid  .boxWidth {
     text-align:right;
     margin-bottom: 10px;
 }

 .usky-grid  .boxWidth input {
     text-align: center;
     width: 40px;
 }

 .usky-grid  .boxWidth label {
     font-size: 10px;
     padding: 0;
     margin: 5px 5px 0 0;
     color: #808080;
 }

 /**************************************************************************************************/
 /* Margin control */
 /**************************************************************************************************/

 .usky-grid .usky-cell{
    padding-bottom: 20px;
 }

 .usky-grid .usky-control{
     margin: 10px 0 0 0;
     padding: 5px;
     border: 1px dashed transparent;
 }

 .usky-grid .usky-templates-columns{
     margin-top: 30px;
 }

 .usky-grid .usky-row-inner{
    margin-right: 45px;
    border: 1px dashed transparent;
 }

 .usky-grid .usky-control-inner{
    padding: 5px;
    margin-right: 45px;
    margin-bottom: 10px;
    border: 1px dashed transparent;
 }

 /**************************************************************************************************/
 /* template */
 /**************************************************************************************************/

 .usky-grid .uSky-templates {
     text-align:center;
     overflow:hidden;
     width:100%;
 }

 .usky-grid .uSky-templates-template {
     display:inline-block;
     width:100px;
     padding-right: 30px;
     margin: 20px;
 }

 .usky-grid .uSky-templates-template a.tb:hover {
     border:5px solid @blue;
 }

 .usky-grid .uSky-templates-template .tb {
     width:100%;
     height:150px;
     padding:10px;
     background-color: @grayLighter;
     border: 5px solid @grayLight;
     cursor:pointer;
     position: relative;
 }

 .usky-grid .uSky-templates-template .tr {
     height: 100%;
     position: relative;
 }

 .usky-grid .uSky-templates-template .tb .uSky-templates-column {
     height:100%;
     border: 1px dashed @grayLight;
     border-right: none;
 }

 .usky-grid .uSky-templates-template .tb .uSky-templates-column.last {
     border-right: 1px dashed @grayLight !important;
 }

 .usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
    background-color: @blue;
 }

 /**************************************************************************************************/
 /* template column */
 /**************************************************************************************************/

 .usky-grid .usky-templates-columns .td{
     border: none !important;
     vertical-align: middle;
 }

.usky-grid .usky-templates-columns .td i{
     color: @gray;
     opacity: 0.8
}

.usky-grid  .mainTbpt:hover {
     border-color:@blue;
}

.usky-grid  .mainTbpt {
     cursor:pointer;
     border-collapse: separate;
     min-height: 35px;
     border: 2px solid @grayLight;
     margin:0px;
     padding: 1px;
}

.usky-grid  .mainTdpt {
     padding: 1px;
}

.usky-grid .mainTbpt {
    height: auto;
}

.usky-grid .mainTdpt {
    height: 11px;
    margin: 0;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    display: block;
    float: left;
}

.mainTdpt span{
    width: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 1px;
    height: 10px;
    background: @grayLight
}

/* New template preview */
.usky-grid {

	.templates-preview {
		display: inline-block;
		width: 100%;
		text-align: center;

		small {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: -25px;
			padding-top: 15px;
		}

		.help-text {
			margin: 35px 35px 0 0;
		}
	}

	.preview-rows {
		display: inline-block;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 125px;
		margin: 35px 40px 15px 0;
		border: 2px solid @grayLight; /* @grayLight */
		transition: border 200ms linear;

		&:hover {
			border-color: @blue;
			cursor: pointer;
		}

		.preview-row {
			display: inline-block;
			width: 100%;
			vertical-align: bottom;
		}
	}

	.preview-rows.layout {
		height: 180px;
		padding: 2px;

		.preview-row {
			height: 100%;
		}

		.preview-col {
			height: 100%;
			border: dashed 1px @grayLight;
		}

		.preview-cell {
			background-color: @grayLighter;
		}
		.preview-overlay {
			display: none;
		}
	}

	.preview-rows.columns {
		min-height: 18px;
		line-height: 11px;
		padding: 1px;
	}

	.preview-col {
		display: block;
		float: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 33.3%; /* temp value */
		height: 10px;
		margin: 0;
		border: 1px solid @white; /* @white */

		.preview-cell {
			display: block;
			width: 100%;
			height: 100%;
			background-color: @grayLight; /* @grayLight */
			margin: 0 1px 1px 0;
		}
	}

	.preview-overlay {
		display: block;
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0;
        box-sizing: border-box;
        left: 0;
        border: 3px solid white;
	}
}

 /**************************************************************************************************/
 /* overlay */
 /**************************************************************************************************/
 .usky-grid  .cell-tools-menu{
     position: absolute;
     width: 360px;
     height: 380px;
     overflow: auto;
     border: 1px solid #ccc;
     margin-top: -270px;
     margin-left: -150px;
     background: white;
     padding: 7px;
     top: 0;
     left: 50%;
     z-index: 6660;
     -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     -moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.45);
 }

 .usky-grid .cell-tools-menu h5{
     border-bottom: 1px solid #d9d9d9;
     color: #999;
     padding: 10px;
     margin-top: 0;
 }

 .usky-grid .elements{
     display: block;
     padding: 0;
     margin: 0;
 }

 .usky-grid .elements li{
     display: inline-block;
     width: 90px;
     height: 80px;
     margin: 5px;
     padding: 5px;
     overflow: hidden;
     font-size: 11px;
 }

 .usky-grid .elements li:hover, .usky-grid .elements li:hover *{
     background: #2e8aea;
     color: white;
 }

 .usky-grid .elements a{
     color: #222;
     text-decoration: none;
 }

 .usky-grid .elements i{
     font-size: 30px;
     line-height: 50px;
     color: #999;
     display: block
 }

 /**************************************************************************************************/
 /* Configuration specific styles */
 /**************************************************************************************************/
.usky-grid-configuration .uSky-templates{
    text-align: left;
}

.usky-grid-configuration ul{
    display: block;
}

.usky-grid-configuration ul li{
    display: block;
    width: auto;
    text-align: left;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template{
    margin: 0px 20px 20px 0px;
    width: 80px;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template .tb{
    max-height: 50px;
    border-width: 2px !important;
    padding: 0px;
    border-spacing:2px;
    overflow: hidden;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template span{
    background: @grayLight;
    display: inline-block;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template .tb:hover{
    border-width: 2px !important;
}

.usky-grid-configuration .uSky-templates-column{
    display: block;
    float: left;
    margin-left: -1px;
    border: 1px white solid !important;
    background: @grayLighter;
}

.usky-grid-configuration .uSky-templates-column.last{
    margin-right: -1px;
}

.usky-grid-configuration .uSky-templates-column.add{
    text-align: center;
    font-size: 20px;
    line-height: 70px;
    color: #ccc;
    text-decoration: none;
    background: white;
}

.usky-grid-configuration .mainTdpt{
    height: initial;
    border: none;
}

.usky-grid-configuration .uSky-templates-rows .uSky-templates-row{
    margin: 0px 50px 20px 0px;
    width: 60px;
}

.usky-grid-configuration .uSky-templates-rows .uSky-templates-row .tb{
    border-width: 2px !important;
    padding: 0px;
    border-spacing:2px;
}

.usky-grid-configuration .uSky-templates-rows .mainTdpt{
    height: 10px !important;
}

.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}

// Gridview
// -------------------------

 .mceContentBody{
         overflow-y:hidden!important;
      }

 IFRAME {overflow:hidden;}

 // Sortabel
 // -------------------------
 .usky-grid .ui-sortable-helper  {
     border: dashed 1px #000 !important;
     background: #ccc;
     opacity: 0.4;
     height: 80px !important;
     width: 160px !important;
     overflow: hidden;
     padding: 5px;
     border-radius:5px;
     -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     -moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.45);
 }

 .usky-grid .ui-sortable-helper *{
     border: none !important;
     background: none !important;
     color: #999 !important;
     padding: 0 !important;
     margin: 0 !important;
 }

 .usky-grid .ui-sortable-helper .cell-tools{
     display: none !important;
 }

 .usky-grid .ui-sortable-placeholder{
     border: 2px dashed @grayLight;
     padding: 20px;
     font-family: icomoon;
     text-align: center;
     font-size: 85px;
     line-height: 65px;
     color: @grayLighter;
     vertical-align: middle;
 }

 .usky-grid .ui-sortable-placeholder:hover{
     border-color: @gray;
 }

 .usky-grid .ui-sortable-placeholder:before{
     content: "\e1bd";
 }

 // utils
 // -------------------------
 .usky-grid-width {
     margin: 20px auto;
     width:100%;
 }
 .usky-grid  .right {
     float:right;
 }

 // general layout components
 // -------------------------
 .usky-grid  .tb {
     width: 100%;
 }

 .usky-grid  .td {
     width: 100%;
     display: inline-block;
     vertical-align:top;
     border-right:1px dashed rgba(182, 182, 182, 0.0);
     box-sizing: border-box;
 }

 .usky-grid .tb:hover .td{
     border-right:1px dashed rgba(182, 182, 182, 0.3);
 }
 .usky-grid  .td.last {
     border-right:1px dashed rgba(182, 182, 182, 0.0) !important;
 }
 .usky-grid  .tr {
 }

 .usky-grid  .middle {
     text-align: center;
 }

 .usky-grid  .mainTb {
     border-collapse: separate;
 }
 .usky-grid  .mainTd {
     position:relative;
 }

 // COLUMN
 // -------------------------
 .usky-grid  .usky-column {

 }
 .usky-grid  .usky-column.last {

 }

 // ROW
 // -------------------------
.usky-grid .usky-row{
     position: relative;
     border: 1px dashed rgba(0,0,0,0);
}

.usky-grid .tb:hover .usky-row{
    border-bottom:1px dashed rgba(182, 182, 182, 0.3);
}

/*.usky-grid .selectedRow {
     border: 1px solid rgba(182, 182, 182, 0.3);
}*/

// CELL
// -------------------------
.usky-grid .usky-cell{
     position: relative;
     border: 1px dashed rgba(0,0,0,0);
}

.usky-grid  .cell-tools {
    transition: all .20s ease-in-out;
    -moz-transition: all .20s ease-in-out;
    -webkit-transition: all .20s ease-in-out;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    width: 150px;
    opacity: 0.3;
    z-index: 50;
}

.usky-grid .cell-tools:hover{
    opacity: 1;
}

.usky-grid  .cell-tools-add {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 0;
    right: 0;
}

.usky-grid  .usky-control:hover .cell-tools-add{
    opacity: 1;
}

.usky-grid  .cell-tools-remove {
    display:inline-block;
    position: absolute;
    top: 0px;
    right: 5px;
    text-align: right;
    z-index: 500;
}

.usky-grid .cell-tools-remove .iconBox:hover, .usky-grid .cell-tools-remove .iconBox:hover *{
    background: @red !important;
    border-color: @red !important;
}

.usky-grid  .cell-tools-move {
    display:inline-block;
    position: absolute;
    top: 40px;
    right: 5px;
    z-index: 500;
    cursor: move
}

.usky-grid .cell-tools-edit{
    position: absolute;
    top: 80px;
    right: 5px;
}

// CONTROL
// -------------------------
.usky-grid .usky-control {
    /*transition: all .20s ease-in-out;
    -moz-transition: all .20s ease-in-out;
    -webkit-transition: all .20s ease-in-out;*/
    position:relative;
    display:block;

    /*
    border: 1px dashed rgba(255, 0, 0, .0);
    border-bottom-width: 1px;
    */

    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

    margin: 10px 0 0 0;
}

.usky-grid  .usky-control:hover{
    /*border: 1px solid rgba(182, 182, 182, 0.3);*/
    //border-bottom: 1px solid rgba(182, 182, 182, 0.3);
}

.usky-grid  .usky-control-placeholder:hover{
    /*border: 1px solid rgba(182, 182, 182, 0);*/
    /*border-bottom:1px solid rgba(182, 182, 182, 0.0) !important;*/
}

.usky-grid .warnhighlight{
     border: 1px dashed @red !important;
}

.usky-grid .infohighlight{
     border: 1px dashed @blue !important;
}

.usky-grid .usky-control-inner{
    min-height: 60px;
}

// CONTROL PLACEHOLDER
// -------------------------
.usky-grid  .usky-control-placeholder {
    min-height: 20px;
    position: relative;
    text-align: center;
    text-align: -moz-center;
    cursor: text;
}

.usky-grid  .usky-control-placeholder .placeholder{
    font-size: 14px; opacity: 0.7; text-align: left;
    padding: 5px;
    border:1px solid rgba(182, 182, 182, 0.3);
    height: 20px;
}

.usky-grid  .usky-control-placeholder:hover .placeholder{
    border:1px solid rgba(182, 182, 182, 0.8);
}

// EDITOR PLACEHOLDER
// -------------------------
.usky-grid .usky-editor-placeholder{
    min-height: 65px;
    padding: 20px;
    padding-bottom: 30px;
    position: relative;
    background-color: white;
    border: 4px dashed @grayLight;
    text-align: center;
    text-align: -moz-center;
}
.usky-grid .usky-editor-placeholder i{
    color: @grayLight;
    font-size: 85px;
    line-height: 85px;
    display: block;
    margin-bottom: 10px;
}

// Form elements
// -------------------------
 .usky-grid  textarea.textstring{
     display: block;
     overflow: hidden;
     border: none;
     background: #fff;
     outline: none;
     resize: none;
     color: @gray;
 }

.usky-grid .usky-cell-rte textarea{
     display: none !important
}

.usky-grid .usky-cell-media .caption{
     display: block;
     overflow: hidden;
     border: none;
     background: #fff;
     outline: none;
     width: 98%;
     resize: none;
     font-style: italic;
}

 .usky-grid  .cellPanelRte {
     min-height:60px;
 }

// ICONS
// -------------------------
 .usky-grid  .iconBox {
     padding: 4px 7px 4px 7px;
     display: inline-block;
     cursor: pointer;
     border-radius: 200px;
     background: rgba(255,255,255, 1);
     border:1px solid rgb(182, 182, 182);
     margin: 2px;
 }
 .usky-grid .iconBox:hover, .usky-grid .iconBox:hover *{
          background: @blue !important;
          color: white !important;
          border-color: @blue !important;
 }

 .usky-grid  .iconBox a:hover {
     text-decoration:none;
     color: white !important;
 }

 .usky-grid  .iconBox.selected {
     -webkit-appearance: none;
     background-image: -moz-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: -webkit-gradient(linear,0 0,0 100%,from(#e6e6e6),to(#bfbfbf));
     background-image: -webkit-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: -o-linear-gradient(top,#e6e6e6,#bfbfbf);
     background-image: linear-gradient(to bottom,#e6e6e6,#bfbfbf);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6',endColorstr='#ffbfbfbf',GradientType=0);
     zoom: 1;
     border-color: #bfbfbf #bfbfbf #999;
     border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
     -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     background: transparent;
 }

 .usky-grid  .iconBox i {
     font-size:16px !important;
     color: #5F5F5F;
 }

 .usky-grid  ul {
     display:inline-block;
     list-style:none;
     padding:0;
     margin: 10px 0 0 0;
     text-align:center;
 }

 .usky-grid  .help-text {
     background: @grayLighter;
     color: @gray;
     font-size: 14px;
     padding: 10px 20px 10px 20px;
     border-radius: 15px;
     display: inline-block;
     clear: both;
 }

 .usky-grid  ul li {
     display: inline-block;
     width: 120px;
     margin: 8px 8px 0px 8px;
 }

 // TINYMCE EDITOR
 // -------------------------
 .usky-grid .mce-panel {
     border:none !important;
     clear:both;
 }

 .usky-grid .mce-btn button {
     padding: 8px 6px;
     line-height: inherit;
 }

 .usky-grid .mce-toolbar {
     border: 1px solid rgba(207, 207, 207, 0.7);
     background-color: rgba(250, 250, 250, 1);
     z-index: 100;
     display: inline-block;
     float: left;
     padding: -1px;
     position: absolute;
     margin: -1px -1px 0 -1px;
     -webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     -moz-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
     z-index: 9999999;
 }

 .mce-flow-layout-item {
     margin: 0;
 }

 .usky-grid  .mce-panel {
     background: transparent !important;
 }
 .usky-grid  .mce-floatpanel {
     background-color: #F7F7F7 !important;
 }

 // MEDIA EDITOR
 // -------------------------
 .usky-grid  .fullSizeImage {
     width:100%
 }

 /**************************************************************************************************/
 /* Width */
 /**************************************************************************************************/

 .usky-grid  .boxWidth {
     text-align:right;
     margin-bottom: 10px;
 }

 .usky-grid  .boxWidth input {
     text-align: center;
     width: 40px;
 }

 .usky-grid  .boxWidth label {
     font-size: 10px;
     padding: 0;
     margin: 5px 5px 0 0;
     color: #808080;
 }

 /**************************************************************************************************/
 /* Margin control */
 /**************************************************************************************************/

 .usky-grid .usky-cell{
    padding-bottom: 20px;
 }

 .usky-grid .usky-control{
     margin: 10px 0 0 0;
     padding: 5px;
     border: 1px dashed transparent;
 }

 .usky-grid .usky-templates-columns{
     margin-top: 30px;
 }

 .usky-grid .usky-row-inner{
    margin-right: 45px;
    border: 1px dashed transparent;
 }

 .usky-grid .usky-control-inner{
    padding: 5px;
    margin-right: 45px;
    margin-bottom: 10px;
    border: 1px dashed transparent;
 }

 /**************************************************************************************************/
 /* template */
 /**************************************************************************************************/

 .usky-grid .uSky-templates {
     text-align:center;
     overflow:hidden;
     width:100%;
 }

 .usky-grid .uSky-templates-template {
     display:inline-block;
     width:100px;
     padding-right: 30px;
     margin: 20px;
 }

 .usky-grid .uSky-templates-template a.tb:hover {
     border:5px solid @blue;
 }

 .usky-grid .uSky-templates-template .tb {
     width:100%;
     height:150px;
     padding:10px;
     background-color: @grayLighter;
     border: 5px solid @grayLight;
     cursor:pointer;
     position: relative;
 }

 .usky-grid .uSky-templates-template .tr {
     height: 100%;
     position: relative;
 }

 .usky-grid .uSky-templates-template .tb .uSky-templates-column {
     height:100%;
     border: 1px dashed @grayLight;
     border-right: none;
 }

 .usky-grid .uSky-templates-template .tb .uSky-templates-column.last {
     border-right: 1px dashed @grayLight !important;
 }

 .usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
    background-color: @blue;
 }

 /**************************************************************************************************/
 /* template column */
 /**************************************************************************************************/

 .usky-grid .usky-templates-columns .td{
     border: none !important;
     vertical-align: middle;
 }

.usky-grid .usky-templates-columns .td i{
     color: @gray;
     opacity: 0.8
}

.usky-grid  .mainTbpt:hover {
     border-color:@blue;
}

.usky-grid  .mainTbpt {
     cursor:pointer;
     border-collapse: separate;
     min-height: 35px;
     border: 2px solid @grayLight;
     margin:0px;
     padding: 1px;
}

.usky-grid  .mainTdpt {
     padding: 1px;
}

.usky-grid .mainTbpt {
    height: auto;
}

.usky-grid .mainTdpt {
    height: 11px;
    margin: 0;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    display: block;
    float: left;
}

.mainTdpt span{
    width: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 1px;
    height: 10px;
    background: @grayLight
}

/* New template preview */
.usky-grid {

	.templates-preview {
		display: inline-block;
		width: 100%;
		text-align: center;

		small {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: -25px;
			padding-top: 15px;
		}

		.help-text {
			margin: 35px 35px 0 0;
		}
	}

	.preview-rows {
		display: inline-block;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 125px;
		margin: 35px 40px 15px 0;
		border: 2px solid @grayLight; /* @grayLight */
		transition: border 200ms linear;

		&:hover {
			border-color: @blue;
			cursor: pointer;
		}

		.preview-row {
			display: inline-block;
			width: 100%;
			vertical-align: bottom;
		}
	}

	.preview-rows.layout {
		height: 180px;
		padding: 2px;

		.preview-row {
			height: 100%;
		}

		.preview-col {
			height: 100%;
			border: dashed 1px @grayLight;
		}

		.preview-cell {
			background-color: @grayLighter;
		}
		.preview-overlay {
			display: none;
		}
	}

	.preview-rows.columns {
		min-height: 18px;
		line-height: 11px;
		padding: 1px;
	}

	.preview-col {
		display: block;
		float: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 33.3%; /* temp value */
		height: 10px;
		margin: 0;
		border: 1px solid @white; /* @white */

		.preview-cell {
			display: block;
			width: 100%;
			height: 100%;
			background-color: @grayLight; /* @grayLight */
			margin: 0 1px 1px 0;
		}
	}

	.preview-overlay {
		display: block;
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0;
        box-sizing: border-box;
        left: 0;
        border: 3px solid white;
	}
}

 /**************************************************************************************************/
 /* overlay */
 /**************************************************************************************************/
 .usky-grid  .cell-tools-menu{
     position: absolute;
     width: 360px;
     height: 380px;
     overflow: auto;
     border: 1px solid #ccc;
     margin-top: -270px;
     margin-left: -150px;
     background: white;
     padding: 7px;
     top: 0;
     left: 50%;
     z-index: 6660;
     -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     -moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.45);
     box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.45);
 }

 .usky-grid .cell-tools-menu h5{
     border-bottom: 1px solid #d9d9d9;
     color: #999;
     padding: 10px;
     margin-top: 0;
 }

 .usky-grid .elements{
     display: block;
     padding: 0;
     margin: 0;
 }

 .usky-grid .elements li{
     display: inline-block;
     width: 90px;
     height: 80px;
     margin: 5px;
     padding: 5px;
     overflow: hidden;
     font-size: 11px;
 }

 .usky-grid .elements li:hover, .usky-grid .elements li:hover *{
     background: #2e8aea;
     color: white;
 }

 .usky-grid .elements a{
     color: #222;
     text-decoration: none;
 }

 .usky-grid .elements i{
     font-size: 30px;
     line-height: 50px;
     color: #999;
     display: block
 }

 /**************************************************************************************************/
 /* Configuration specific styles */
 /**************************************************************************************************/
.usky-grid-configuration .uSky-templates{
    text-align: left;
}

.usky-grid-configuration ul{
    display: block;
}

.usky-grid-configuration ul li{
    display: block;
    width: auto;
    text-align: left;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template{
    margin: 0px 20px 20px 0px;
    width: 80px;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template .tb{
    max-height: 50px;
    border-width: 2px !important;
    padding: 0px;
    border-spacing:2px;
    overflow: hidden;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template span{
    background: @grayLight;
    display: inline-block;
}

.usky-grid-configuration .uSky-templates .uSky-templates-template .tb:hover{
    border-width: 2px !important;
}

.usky-grid-configuration .uSky-templates-column{
    display: block;
    float: left;
    margin-left: -1px;
    border: 1px white solid !important;
    background: @grayLighter;
}

.usky-grid-configuration .uSky-templates-column.last{
    margin-right: -1px;
}

.usky-grid-configuration .uSky-templates-column.add{
    text-align: center;
    font-size: 20px;
    line-height: 70px;
    color: #ccc;
    text-decoration: none;
    background: white;
}

.usky-grid-configuration .mainTdpt{
    height: initial;
    border: none;
}

.usky-grid-configuration .uSky-templates-rows .uSky-templates-row{
    margin: 0px 50px 20px 0px;
    width: 60px;
}

.usky-grid-configuration .uSky-templates-rows .uSky-templates-row .tb{
    border-width: 2px !important;
    padding: 0px;
    border-spacing:2px;
}

.usky-grid-configuration .uSky-templates-rows .mainTdpt{
    height: 10px !important;
}

.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}


SW-10704 - main search results are now on top of the advanced menu

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/simkli/shopware.git/'


fixed margin in mobile newsletter

fixed margin in mobile newsletter

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/atelier-cartographique/atelier-carto-web.git/'


changed things :D

changed things :D

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/TobiasFranek/paul.fleischmann.git/'


Danut spinner animation

Danut spinner animation

fix white space and block size (margin big space)

fatal: remote error: upload-pack: not our ref 06be641012883d856d3eb01ab9814ba16abc7f45
fatal: the remote end hung up unexpectedly


Fix switches

Fix switches

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/metao1/chat.git/'


Re-add reset

Re-add reset

@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";

//
// Modals
// Adapted from http://github.com/necolas/normalize.css
// --------------------------------------------------

// Display in IE6-9 and FF3
// -------------------------

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------

audio,
canvas,
video {
  display: inline-block;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------

audio:not([controls]) {
    display: none;
}

// Focus states
a:focus {
  .tab-focus();
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%; /* Part 1: Set a maxium relative to the parent */
  width: auto\9; /* IE7-8 need help adjusting responsive images */
  height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

// Prevent max-width from affecting Google Maps
#map_canvas img {
  max-width: none;
}

// Forms
// -------------------------

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clickable inputs in iOS
}

textarea {
  overflow: auto; // Remove vertical scrollbar in IE6-9
  vertical-align: top; // Readability and alignment cross-browser
}

error: pathspec 'core/app/assets/stylesheets/twitter/bootstrap/reset.css.less' did not match any file(s) known to git


Add Custom stylesheet for google chrome inspector. (Solarized theme)

error: pathspec 'misc/User' did not match any file(s) known to git
error: pathspec 'StyleSheets/Custom.less' did not match any file(s) known to git


fix(ui): removed duplicate heading styles (#19447)

Co-authored-by: Robin Rendle <474ee9ee179b0ecf0bc27408079a0b15eda4c99d@erskinedesign.com>

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/beeftornado/sentry.git/'


BAP-5448 grid action toolbar is shifted

BAP-5448 grid action toolbar is shifted

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/trustify/oroplatform.git/'