body {
	padding: 0;
	margin: 0;
	/* font-family: Verdana, Geneva, sans-serif;
	font-size: 12px; */
}

#pageWrapper {
	width: 100%;
	height: 100%;
	display: flex;
}

#pageMenuWrapper {
	/* min-width: 350px; */
	height: 100%;
	padding:10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-color: white;
}

#pageMenuTopBox {
	width: 100%;
	background-color: #EEE;
	margin-bottom: 10px;
}

#pageMenuContentBox {
	flex-grow: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
	border: 2px solid lightgray;
}

#pageMenuContentTabs {
	width: 100%;
	background-color: lightgrey;
	border-bottom: 1px solid #AAA;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
}

#pageMenuContentList {
	width: 100%;
	flex-grow: 1;
	overflow-y: scroll;
	padding: 5px;
	box-sizing: border-box;
}

#myProfile {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: skyblue;
}

#myDetails {
	width: 100%;
	height: 100px;
	background-color: #EEE;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
}

#myProfilePicture {
	width: 80px;
	height: 80px;
	border-radius: 50px;
	background-color: dodgerblue;
	flex-shrink: 0;
	margin-right: 5px;
}

#myName {
	flex-grow: 1;
	flex-shrink: 1;
	padding-left: 5px;
	box-sizing: border-box;
}

#pageContentContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#pageContentTopBar {
	background-color: #CCC;
    padding: 10px;
    margin: 10px 10px 0px 10px;
    box-sizing: border-box;
}

#pageContentWrapper {
	height: 100%;
	background-color: #FFFFFF;
	flex-grow: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	overflow-y: hidden;
	max-height: calc(100vh - 50px);
}

#pageContent {
	flex-grow: 1;
	padding: 5px;
	box-sizing: border-box;
	display: flex;
}

#pageContentQuickBar {
	height: 100%;
	background-color: #DDD;
	box-sizing: border-box;
	border-left: 1px solid #AAA;
	overflow-y: scroll;
	flex-shrink: 0;
}

.pageContentQuickBarCircleCell {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: dodgerblue;
	flex-shrink: 0;
	margin: 10px;
	display: flex;
	flex-direction: column;
}

/******* list items **********/

.lhMenulistItem {
	background-color: #DDD;
	display: flex;
	padding: 10px;
	margin: 5px;
}

.lhMenuListItemImage {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: dodgerblue;
	flex-shrink: 0;
	margin-right: 5px;
}

.lhMenuListItemText {
	padding: 0px;
	margin: 0px;
}

#topBarText {
	float: right;
	line-height: 40px;
	padding-right: 10px;
}

#mainContentBlockOne, #mainContentBlockTwo {
	flex-grow: 1;
	background-color: #FFFFFF;
	margin: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 2px solid lightgray;
}

#conversationWith {
	flex-grow: 1;
}

#conversationOwner {
	flex-grow: 1;
}

#messengerHeader {
	width: 100%;
	display: flex;
	background-color: lightgray;
	/* min-width: 300px; */
}

#messengerConversation {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: scroll;
	margin: 5px 0px
}

.messageListItem {
	padding: 5px 10px 5px 10px;
	margin: 0px 3px 5px 3px;
	background-color: turquoise;
	box-sizing: border-box;
	width: auto;
	align-self: self-start;
	max-width: 70%;
}

#messengerInputWrapper {
	padding: 10px;
}

#messengerInputForm {
	padding: 5px;
	background-color: white;
	display: flex;
	align-items: center;
	border-radius: 20px;
	border: 2px solid lightgray;
}

#message_body {
	margin-bottom: 0px;
	border: none;
	width: 100%;
}

.fas.fa-cog.fa-2x {
	display: none;
}