#contentArea {
	margin-left: 225px;
	height: 100%;
	min-width: 260px;
	background: #EDEDED;
	transition: margin-left 0.3s ease;
}

.contentAreaCollapsed {
	margin-left: 100px !important;
}

#contentArea > .topBar {
	background: white;
	height: 70px;
	display: flex;
	align-items: center;
	position: relative;
}

#contentArea #menuButton {
	float: left;
	height: 33px;
	width: 40px;
	margin-left: 30px;
	margin-right: 10px;
	cursor: pointer;
	background: #0E9AEF;
	border-radius: 5px;
	outline: none;
	position: relative;
}

	#contentArea #menuButton svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 15px;
	}

#contentArea > .topBar > div:nth-child(2) {
	margin-left: auto;
}

#contentArea > .topBar .tenantSelectHolder {
	margin-right: 25px;
}

	#contentArea > .topBar .tenantSelectHolder .tenantSelect {
		width: 200px;
		padding: 10px;
	}

		#contentArea > .topBar .tenantSelectHolder .tenantSelect option {
			width: 300px;
		}

#contentArea #activityLogButtonHolder {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	position: relative;
	width: 35px;
	height: 35px;
	cursor: pointer;
}

	#contentArea #activityLogButtonHolder #activityLogButton {
		width: 25px;
		height: 25px;
		outline: none;
	}

		#contentArea #activityLogButtonHolder #activityLogButton.off path {
			fill: #B0B0B0;
		}

		#contentArea #activityLogButtonHolder #activityLogButton.on path {
			fill: #0E9AEF;
		}

		#contentArea #activityLogButtonHolder #activityLogButton:hover path {
			fill: #0E9AEF;
		}

	#contentArea #activityLogButtonHolder .notificationIcon {
		position: absolute;
		right: -3px;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		background: #23c6c8;
		padding: 2px 6px;
		border-radius: 5px;
	}

		#contentArea #activityLogButtonHolder .notificationIcon span {
			font-size: 11px;
		}

#contentArea #accountManagementButtonHolder {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	position: relative;
	width: 35px;
	height: 35px;
	cursor: pointer;
}

	#contentArea #accountManagementButtonHolder #accountManagementButton {
		width: 20px;
		height: 20px;
		outline: none;
	}

		#contentArea #accountManagementButtonHolder #accountManagementButton path {
			fill: #B0B0B0;
		}

		#contentArea #accountManagementButtonHolder #accountManagementButton:hover path {
			fill: #0E9AEF;
		}

#contentArea #logoutButton {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 40px;
	cursor: pointer;
	outline: none;
}

	#contentArea #logoutButton svg {
		height: 100%;
		width: 18px;
	}

	#contentArea #logoutButton:hover path {
		fill: #EF3030;
	}

#contentArea > .topBar .bottomBorder {
	position: absolute;
	height: 1px;
	width: 100%;
	bottom: 0;
	background: rgba(0,0,0,0.25);
}

#contentArea #stagingArea {
	width: 100%;
	height: calc(100% - 70px);
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch; /* Required for smooth scroll on iOS */
}

/* Reponsive layout */
@media (max-width: 800px) {
	#contentArea {
		margin-left: 100px;
		height: 100%;
	}

	.contentAreaCollapsed {
		margin-left: 0 !important;
	}

	#contentArea .tenantSelectHolder .tenantSelect {
		width: 75px;
	}
}

@media (max-width: 500px) {
	#contentArea #logoutButton {
		margin-right: 25px;
	}

		#contentArea #logoutButton svg {
			width: 18px;
		}

	#contentArea > .topBar .tenantSelectHolder {
		margin: auto;
	}

		#contentArea > .topBar .tenantSelectHolder .tenantSelect {
			width: 25vw;
			padding: 10px;
		}

			#contentArea > .topBar .tenantSelectHolder .tenantSelect option {
				width: 25vw;
			}
}