.App-content {
	border: 0;

	@media @desktop-up {
		padding-left: 280px;
	}
}

.App-header {
	.scrolled & {
		box-shadow: none;
	}

	header& {
		border-bottom: 1px solid #e8e8e8;

		& when (@config-dark-mode = true) {
			border-color: #2a3346;
		}
	
	  .container {
		  margin: 0;
		  width: 100%;
	  }
	}

	.Header-secondary {
		& .item-newDiscussion .Button {
			margin-left: 15px;
			margin-right: 15px;
			line-height: normal;
	
			@media (max-width: @screen-tablet-max) {
				display: none;
			}
		}
	
		& .Search {
			@media (max-width: @screen-tablet-max) {
				margin-right: 0;
			}
		}
	}
	
	.Header-primary .LinksButton {
		@media (max-width: @screen-tablet-max) {
			padding: 7px;
			font-size: 12px;
		}
	}
}

.hasPane.panePinned {
	& .App-content, & .App-footer {
		margin-left: 120px;
	}
}

// ------------------------------------
// Sidebar

.App-sidebar {
	position: fixed;
	left: 0;
	top: 52px;
	bottom: 0;
	width: 280px;
	border-right: 1px solid #e8e8e8;
	background: #fafafa;

	@media (max-width: @screen-tablet-max) {
		display: none;
	}

	& when (@config-dark-mode = true) {
		border-color: transparent;
		background: #1C2330;
	}

	.App-sidebar-container {
		height: 100%;
		width: 100%;
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.App-sidebar-user-block {
		position: relative;
		margin: 20px 20px 0 20px;
		border-bottom: 1px solid #dedede;
		text-align: center;
		height: 200px;
		display: flex;
		align-items: center;
	
		& when (@config-dark-mode = true) {
			border-color: #2a3346;
		}
	
		.avatarWrapper {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 82px;
			height: 82px;
			min-width: 82px;
			border: 1px solid #d8d8d8;
			border-radius: 50%;
			margin: 0 auto 6px auto;
		
			& when (@config-dark-mode = true) {
				border-color: #2a3346;
			}
		}
	
		.Avatar-container {
			position: relative;
	
			.badges {
				position: absolute;
				width: 64px;
				text-align: right;
				white-space: nowrap;
				bottom: 0;
				right: 0;
	
				.Badge {
					margin-left: -10px;
				}
			}
	
			.Avatar {
				.Avatar--size(4.5rem);
			}
		}
	
		h4 {
			font-family: "Montserrat",sans-serif;
			font-weight: 600;
			font-size: .9rem;
			color: #393a4f;
			margin: 0;
			padding-bottom: 10px;
		
			& when (@config-dark-mode = true) {
				color: white;
			}
		}
	
		p {
			font-size: .8rem;
			color: #808080;
			margin: 0;
			padding: 0;
		
			& when (@config-dark-mode = true) {
				color: #a2a5b9;
			}
		}
	
		.loggedIn {
			width: 100%;
		}
		
		.guest {
			.guestButtons {
				margin-top: 10px;
			
				.Button {
					font-weight: 500;
					background: transparent;
					border: 1px solid #ccc;
					border-radius: 4px;
					color: #757a91;
			
					&:hover {
						background: #f0f0f0;
			
						& when (@config-dark-mode = true) {
							background: #4b93d1;
						}
					}
			
					& when (@config-dark-mode = true) {
						border-color: #4b93d1;
						color: #f5f5f5;
					}
				}
			}
			
			.guestGreeting, .guestMessage {
				text-align: left;
			}
		}
		
		.App-sidebar-user-stats {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20px 0;
		
			.statItem {
				text-align: center;
		
				span {
					display: block;
		
					&:first-child {
						font-family: "Montserrat",sans-serif;
						text-transform: uppercase;
						font-weight: 500;
						font-size: .65rem;
						color: #393a4f;
					
						& when (@config-dark-mode = true) {
							color: white;
						}
					}
			
					&:last-child {
						font-size: .8rem;
						color: #999;
					
						& when (@config-dark-mode = true) {
							color: #a2a5b9;
						}
					}
				}
			}
		}
	}
	
	.App-sidebar-items {
		position: absolute;
		left: 0;
		width: 100%;
	
		.App-sidebar-items-container {
			position: relative;
			width: 100%;
			overflow-y: hidden;
			padding: 20px 0;
		
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}
		
			li {
				padding: 14px 40px;
				border-left: 4px solid transparent;
	
				&.separator {
					margin: 15px 30px;
					padding: 0;
					border-left: 0;
					border-bottom: 1px solid #dedede;
				
					& when (@config-dark-mode = true) {
						border-color: #2a3346;
					}
				}
	
				& a {
					display: flex;
					align-items: center;
	
					& span {
						display: block;
						color: #393a4f;
						font-family: "Montserrat",sans-serif;
						font-size: .8rem;
						font-weight: 600;
				
						& when (@config-dark-mode = true) {
							color: #a2a5b9;
						}
					}
	
					&:hover {
						text-decoration: none;
					}
				}
	
				& i.icon {
					height: 18px;
					width: 18px;
					margin-right: 20px;
					color: #cecece;
				}
			
				&.active {
					border-color: #3B3F42;
			
					& when (@config-dark-mode = true) {
						border-color: #a2a5b9;
					}
				}
			}
		}
	}
}