/**
 * Reset
 */
body {
	margin: 0;
}

button {
	border: none;
	background: transparent;
}

p {
	margin: 0;
}

$viewport_bg_color: #6B7A90;
$dot_bg_color: #FF6160;
$dot_width: 40px;
$dot_height: $dot_width;
$discussion_panel_width: 360px;
$discussion_panel_width_tablet: 260px;
$breakpoint_xs: 480px;
$breakpoint_sm: 768px;
$breakpoint_md: 992px;
$breakpoint_lg: 1200px;

/**
 * Smart Mockups
 */
body {
    background-color: $viewport_bg_color;
    font-family: Roboto;
    font-size: 14px;
	letter-spacing: 0.4px;
	line-height: 120%;
}

.sm-pr {
	position: relative;
}

.sm-pa {
	position: absolute;
}

#sr-mockup-viewport {
	padding: 120px 0 60px;

	text-align: center;

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	header#sr-header {
		position: fixed;
		z-index: 800;

		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);

		background-color: #FFF;


		.sm-mockup-title {
			margin: 16px;
			font-size: 20px;
			font-weight: 500;
			text-transform: uppercase;
		}


		.sr-nav {

			.sr-navbar {
				float: left;

				&:before {
					display: table;
					content: " ";
				}

				&:after {
					clear: both;
				}

				li {
				    border-right: 1px solid #DCDCDC;
				}
			}

			.sr-navbar-right {
				float: right;

				li {
					border-right: none;
					border-left: 1px solid #DCDCDC;
				}

				@media screen and (max-width: $breakpoint_xs) {
					border-top: 1px solid #DCDCDC;

					li {
						display: table-cell;
						float: none;
					}
				}
			}

			@media screen and (max-width: $breakpoint_xs) {
				.sr-navbar {
					display: table;
					width: 100%;
				}
			}

			li {
				display: block;
				float: left;

				transition: all 0.3s;

				>a {
					display: block;
					text-decoration: none;
					text-transform: uppercase;
					font-family: Roboto;

					font-size: 18px;
					padding: 15px 20px;
					opacity: 0.4;

					color: #333;
					transition: all 0.3s;

					&.sr-mockup-approval {
						opacity: 0.8;

						color: #FFF;
						background-color: #34B947;
					}

					&:hover {
						opacity: 0.6;
					}

					&.sr-mockup-approval {
						&:hover {
							opacity: 1;
						}
					}
				}

				.sr-mockup-approved {
					display: block;

					font-size: 18px;
					padding: 8px 20px;
					opacity: 0.8;

					color: #FFF;
					background-color: #34B947;

					small {
						display: block;
						text-align: right;

						font-size: 12px;
					}
				}

				&.active {
					box-shadow: inset 0 -4px 0 #34b947;

					a {
						opacity: 1;
					}
				}
			}
		}
	}

	.sr-mockup-discussion {
		position: absolute;
		overflow: hidden;
		font-family: Roboto;

		top: 30px;
		right: 0;
		// bottom: 30px;
		max-height: 40%;
		width: $discussion_panel_width - 20px;
		margin-right: 20px;
		z-index: -30;
		transition: all 0.3s;
		border-radius: 0 6px 6px 0;
		padding-top: 15px;

		box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
		background-color: #FFF;

		&:before {
			content: "";
			position: absolute;

			top: 0;
			left: 0;
			width: 18px;
			height: 100%;
			z-index: 10;

			background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
		}

		.discussion-title {
			margin-top: 0;
			padding: 0 15px;
		}

		.discussion-comment-list {
			position: relative;
			overflow: scroll;

			max-height: 480px;
    		box-shadow: inset 0 0 15px -5px rgba(0, 0, 0, 0.3);

			background-color: #F9F9F9;

			li {
				padding: 10px 15px;

				border-bottom: 1px solid #EFEFEF;

				.sr-avatar {
					float: left;

					width: 50px;

					img {
						max-width: 100%;
						border-radius: 50%;
					}
				}

				.sr-comment-content {
					position: relative;
					overflow: hidden;

					padding-left: 10px;
					font-size: 13px;

					.sr-comment-text {
						display: block;

						margin-top: 5px;

						color: #666666;
					}

					.sr-comment-time {
						display: none;
						position: absolute;

						top: 0;
						right: 0;
						font-size: 12px;
						font-weight: 100;

						color: #CECECE;
					}

					.sr-user-display {
						position: relative;
						text-transform: uppercase;

						padding: 2px 5px;
						font-size: 10px;

						background-color: #3F98E6;
						color: #FFF;
					}
				}

				&:after {
					content: "";
					display: block;
					clear: both;
				}

				&:last-of-type {
					border-bottom: none
				}

				&:hover {
					.sr-comment-time {
						display: block;
					}
				}
			}
		}
	}

	&.show-discussion {

		.sr-mockup-wrapper {
			margin-right: $discussion_panel_width;
		}

		.sr-mockup-discussion {
			max-height: 80%;

			box-shadow: 10px 0 40px -10px rgba(0,0,0,.4);
			right: -$discussion_panel_width;
		}

		// .invert-horizontal {

		// 	.sr-feedback-content {
		// 		top: - $dot_height / 1.8 !important;
		// 		left: $dot_width / 1.2 !important;
		// 		right: auto !important;

		// 		&:before,
		// 		&:after {
		// 			right: auto !important;
		// 			left: -20px !important;

		// 			border-left-color: transparent !important;
		// 			border-right-color: #FFF !important;
		// 		}

		// 		&:after {
		// 			border-right-color: rgba(0, 0, 0, 0.1) !important;
		// 		}
		// 	}
		// }
	}

	@media screen and (max-width: $breakpoint_xs) {
		.sr-mockup-discussion {
			width: 100% !important;
			margin-right: 0;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: -110%;
			max-height: 100% !important;
			border-radius: 0;
			z-index: 80 !important;
		}

		&.show-discussion {
			.sr-mockup-wrapper {
				margin-right: 20px !important;
			}

			.sr-mockup-discussion {
				left: 0;

				.discussion-field-submit {
					border-radius: 0 !important;
				}

				&:before {
					display: none;
				}
			}
		}
	}

	.sr-mockup-discussion {
		display: none;
	}

	&.loaded {
		.sr-mockup-discussion {
			display: block;
		}
	}

	footer#sr-footer {
		font-family: Roboto;

		margin-top: 60px;
		font-weight: 100;
		letter-spacing: 0.5px;

		color: rgba(255, 255, 255, 0.3);

		.sm-credits a {
			color: rgba(255, 255, 255, 0.6);
			text-decoration: none;

			&:hover {
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	main.sr-mockup-wrapper {
		position: relative;
		display: inline-block;
		text-align: left;
		font-family: Roboto;

		margin-left: 20px;
		margin-right: 20px;

		transition: all 0.3s;

		box-shadow: 0 10px 100px rgba(0, 0, 0, 0.4);

		// .sr-dot {
		// 	transform: scale(0.8,0.8);
		// }

		// &:hover {
		// 	.sr-dot {
		// 		transform: scale(1,1);
		// 	}
		// }

		.sr-mockup-image {
			cursor: cell;

			&:after {
				content: "";
				position: absolute;
				display: block;

				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			img#sr-mockup-image-src {
				display: block;

				width: 100%;
			}
		}

		.sr-mockup-dots {
			// position: absolute;

			// top: 0;
			// left: 0;
			// z-index: 100;

			.sr-feedback {
				position: absolute;

				width: 1px;
				height: 1px;
				z-index: 50;

				&.preloaded {
					transform: scale(0,0);
					transition: all 0.2s ease-in-out;

					&.loaded {
						transform: scale(1,1);
					}
				}

				.sr-dot {
					position: relative;
					box-sizing: border-box;
					cursor: pointer;

					width: $dot_width;
					height: $dot_height;
					margin-top: - $dot_height / 2;
					margin-left: - $dot_width / 2;
					border-radius: $dot_width / 2;

					background-color: $dot_bg_color;
					border: 4px solid #FFF;
					box-shadow: 0 4px 10px -1px rgba(0,0,0,.4), inset 0 1px 1px 1px rgba(0,0,0,.15);

					transition: transform 0.15s ease-in;

					span {
						display: block;
						text-align: center;

						line-height: $dot_height - 8;
						font-size: 18px;

						color: #FFF;
					}

					&:hover {
						transform: scale(1.2, 1.2);
					}
				}

				.sr-feedback-content {
					position: absolute;
					display: none;

					top: - $dot_height / 1.8;
					left: $dot_width / 1.2;
					width: 360px;
					border-radius: 6px;
					min-height: 20px;
					padding-top: 38px;

					background-color: #FFF;
					box-shadow: 0 2px 10px -1px rgba(0,0,0,.5);

					&:before,
					&:after {
						content: "";
						position: absolute;

						top: 13px;
						left: -20px;
						width: 20px;
						height: 20px;
						z-index: 20;

						border: 10px solid #FFF;
						border-top-color: transparent;
						border-bottom-color: transparent;
						border-left-color: transparent;
						box-sizing: border-box;
					}

					&:after {
						top: 15px;
						border-right-color: rgba(0, 0, 0, 0.1);
						z-index: 10;
					}

					.feedback-comments {

						.feedback-comment-list {

							max-height: 340px;
							box-shadow: inset 0 0 15px -5px rgba(0, 0, 0, 0.3);

							background-color: #F9F9F9;

							position: relative;
							overflow-x: hidden;

							li {
								padding: 10px 15px;

								border-bottom: 1px solid #EFEFEF;

								.sr-avatar {
									float: left;

									width: 50px;

									img {
										max-width: 100%;
										border-radius: 50%;
									}
								}

								.sr-comment-content {
									position: relative;
									overflow: hidden;

									padding-left: 10px;
									font-size: 13px;

									.sr-comment-text {
										display: block;

										margin-top: 5px;

										color: #666666;
									}

									.sr-comment-time {
										display: none;
										position: absolute;

										top: 0;
										right: 0;
										font-size: 12px;
										font-weight: 100;

										color: #CECECE;
									}

									.sr-user-display {
										position: relative;
										text-transform: uppercase;

										padding: 2px 5px;
										font-size: 10px;

										background-color: #3F98E6;
										color: #FFF;
									}
								}

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								&:first-child {
									// margin-top: 10px;
									// border-top: 1px solid #EFEFEF;
								}

								&:last-of-type {
									// margin-bottom: 10px;
								}

								&:hover {
									.sr-comment-time {
										display: block;
									}
								}
							}
						}
					}
				}

				&.open,
				&.hover {
					z-index: 200;

					.sr-feedback-content {
						display: block;
					}

					.sr-dot {
						z-index: 300;
					}
				}

				&.hover {
					z-index: 400;
				}

				&.invert-horizontal {

					.sr-feedback-content {
						left: auto;
						right: $dot_width / 1.2;

						&:before,
						&:after {
							right: -20px;
							left: auto;

							border-right-color: transparent;
							border-left-color: #FFF;
						}

						&:after {
							border-left-color: rgba(0, 0, 0, 0.1);
						}
					}
				}

				&.orientation-vertical {

					.sr-feedback-content {
						top: $dot_height / 1.2 !important;
						left: -180px !important;

						&:before,
						&:after {
							top: -20px;
							right: -20px;
							left: 50%;
							margin-left: -10px;

							border-right-color: transparent;
							border-left-color: transparent;
							border-bottom-color: #FFF;
						}

						&:after {
							top: -21px !important;
							border-bottom-color: rgba(0, 0, 0, 0.1);
						}
					}
				}

				.feedback-status {
					position: absolute;

					top: 0;
					left: 15px;
					font-size: 10px;

					color: #FFF;

					>div {
						display: none;
						padding: 2px 5px;
					}

					.feedback-draft {
						background-color: #FF6160;
					}
				}

				&.draft {

					.feedback-draft {
						display: block;
					}

					.feedback-action {

						button {

							display: none;

							&.feedback-delete {
								display: initial;
							}
						}
					}
				}

				&.draft.saved {
					.feedback-close {
						display: initial;
					}
				}

				&.empty {

					.feedback-action {

						button {

							display: none;

							&.feedback-delete {
								display: initial;
							}
						}
					}
				}

				&:last-of-type {
					.feedback-next {
						display: none;
					}
				}

				&:first-of-type {
					.feedback-prev {
						display: none;
					}
				}

				&.ui-draggable-dragging {
					.sr-feedback-content {
						display: none;
					}
				}
			}
		}

		.feedback-action {
			position: absolute;

			top: 5px;
			right: 10px;

			button {
				cursor: pointer;
				outline: none;

				font-size: 16px;
				padding: 5px;

				opacity: 0.2;

				&:hover {
					opacity: 0.8
				}
			}
		}

		.discussion-comment-form,
		.feedback-comment-form {

			.discussion-field-wrapper,
			.feedback-field-wrapper {
				padding: 0 15px;
				margin-top: 10px;
				margin-bottom: 10px;

				.discussion-field-comment,
				.feedback-field-comment,
				.feedback-field-guest-display-name {
					font-family: Roboto;
					border: none;
					outline: none;
					resize: none;
					box-sizing: border-box;

					width: 100%;
					font-size: 13px;
					border-radius: 2px;
					padding: 8px 10px;
					line-height: 1.5;
					letter-spacing: 0.4px;

					border: 2px dashed #E0E0E0;
					background-color: #F5F5F5;


					&:focus {
						border-color: transparent;

						&.error {
							border-color: red;
							border-style: solid;
						}
					}
				}

				.feedback-field-guest-display-name {
					margin-bottom: 10px;


					&+.sm-guest-display-name {
						display: none;
						text-transform: uppercase;

						padding: 4px 5px 2px;
						font-size: 10px;

						color: #666;
						background-color: #F5F5F5;
					}

					&[type="hidden"]+.sm-guest-display-name {
						display: inline-block;

						&:before {
							content: "posting as: ";
							opacity: 0.5;
						}
					}

				}
			}

			.discussion-field-wrapper-submit,
			.feedback-field-wrapper-submit {
				display: none;

				.discussion-field-submit,
				.feedback-field-submit {
				    border: none;
				    outline: none;
					display: block;
					cursor: pointer;
					text-transform: uppercase;

					width: 100%;
					padding: 15px 10px;
					border-radius: 0 0 6px 6px;
					font-size: 13px;
					font-weight: 600;

					background: #34CE4A;
					color: #FFF;
				}

				.discussion-field-submit {
					border-radius: 0 0 6px 0;
				}

				&.active {
					display: block;
				}
			}
		}

	}

	.template,
	#sr-feedback-loader {
		display: none;
	}

	&.hide-feedbacks {
		.sr-mockup-dots {
			display: none;
		}
	}

	&.feedbacks-disabled {

		.feedback-delete,
		.feedback-comment-form {
			display: none !important;
		}

		.feedback-comment-list {
			:last-of-type {
				border-bottom: none !important;
			}
		}
	}
}

.sm-modal {
	display: none;
	font-family: Roboto;

	.sr-modal-content {
		margin-bottom: 15px;
	}

	.sr-modal-close {
		display: block;
		border: none;
		box-sizing: border-box;
		outline: none;

		font-size: 16px;
		padding: 10px 0;
	}

	.sr-modal-close {
		position: relative;
		display: inline-block;
		text-decoration: none;

		top: -1px;
		padding: 10px 15px;
		line-height: 18px;

		color: #9C9C9C;
		background-color: #DDD;
	}
}

#sr-modal-approval {

	&.current {
		display: inline-block;
	}

	.sr-approval-title {
		margin-bottom: 20px;
	}

	.sr-approval-description {
		margin-bottom: 20px;
	}

	.sr-approval-signature-form {

		input {
			display: block;
			border: none;
			box-sizing: border-box;
			outline: none;

			font-size: 16px;
			padding: 10px 0;
		}

		input {
			width: 80%;
			margin-bottom: 20px;
			border-bottom: 2px solid #666;

			background-color: #FFF;
		}

		input[type="submit"] {
			display: inline-block;
			cursor: pointer;
			border-bottom: none;
			width: auto;

			opacity: 0.8;
			margin-bottom: 0;
			padding: 10px 15px;

			color: #FFF;
			background-color: #34CE4A;

			&:hover {
				opacity: 1;
			}
		}
	}
}

#sr-password-form-wrapper {
	display: block;

	max-width: 420px;
	margin: 60px auto;

	form {
		display: inline-block;

		width: 100%;
		box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.4);

		label {
			display: none;
		}

		input {
			display: block;
			float: left;
			border: none;
			box-sizing: border-box;
			outline: none;

			font-size: 16px;
			padding: 10px 15px;
			width: 80%;

			color: #333;
			background-color: #FFF;
		}

		input[type="submit"] {
			cursor: pointer;

			width: 20%;
			opacity: 0.8;

			color: #FFF;
			background-color: #34CE4A;

			&:hover {
				opacity: 1;
			}
		}

		&:after {
			content: "";
			clear: both;
		}
	}
}

.blocker {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	overflow: auto;
	z-index: 850;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}

.blocker:before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}

.modal {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 900;
	width: 420px;
	background: #fff;
	padding: 20px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	text-align: left;
	box-sizing: border-box;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: none;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url("data:image/png;base64,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") no-repeat 0 0;
}

.modal-spinner {
	display: none;
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -32px;
	margin-top: -32px;
	background: url("data:image/gif;base64,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") #111 no-repeat center center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/* tipr plugin */

.tipr_content {
     font-size: 12px;
     color: #FFF;
     background-color: #111;
     padding: 5px 10px;
}

.tipr_container_bottom {
     display: none;
     position: absolute;
     margin-top: 13px;
     z-index: 1000;
}

.tipr_container_top {
     display: none;
     position: absolute;
     margin-top: -77px;
     z-index: 1000;
}

.tipr_point_top,
.tipr_point_bottom {
     position: relative;
	background: #111;
	border: 1px solid #111;
}

.tipr_point_top:after,
.tipr_point_top:before {
	position: absolute;
	pointer-events: none;
	border: solid transparent;
	top: 100%;
	content: "";
	height: 0;
	width: 0;
}

.tipr_point_top:after {
	border-top-color: #111;
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}

.tipr_point_top:before {
	border-top-color: #111;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}

.tipr_point_bottom:after, .tipr_point_bottom:before {
	position: absolute;
	pointer-events: none;
	border: solid transparent;
	bottom: 100%;
	content: "";
	height: 0;
	width: 0;
}

.tipr_point_bottom:after {
	border-bottom-color: #111;
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}

.tipr_point_bottom:before {
	border-bottom-color: #111;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}

/* perfect-scrollbar plugin */
.ps-container{-ms-touch-action:none;touch-action:none;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling{pointer-events:none}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container:hover.ps-in-scrolling{pointer-events:none}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:0.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}

/* responsive */

@media (max-width: $breakpoint_md) {
	#sr-mockup-viewport {

		.sr-mockup-discussion {
			width: $discussion_panel_width_tablet - 20px;
		}

		&.show-discussion {

			.sr-mockup-wrapper {
				margin-right: $discussion_panel_width_tablet;
			}

			.sr-mockup-discussion {
				right: -$discussion_panel_width_tablet;
			}
		}
	}
}