.inbox-page{
	position: relative;
	display: flex;
	.inbox__single-col{
		height: calc(100vh - 48px);
		@media (min-width: $screen-md-min){
			height: calc(100vh - 60px);
		}
	}
	.inbox__list-convo{
		flex: 0 0 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-right: 1px solid #e0e0e0;
		@media (min-width: $screen-sm-min){
			flex: 0 0 280px;
		}
		@media (min-width: $screen-md-min){
			flex: 0 0 360px;
		}
		.inbox__list-convo__header{
			display: none;
			padding: 16px 14px;
			border-bottom: 1px solid #e0e0e0;
			@media (min-width: $screen-sm-min){
				flex: 0 0 auto;
				display: block;
				min-height: 0;
			}
			.list-title{
				line-height: 24px;
				font-size: 16px;
				font-weight: 500;
				color: $grey900;
			}
		}
		.inbox__list-convo__search-user{
			flex: 0 0 auto;
			min-height: 0;
			padding: 11px 12px ;
			border-bottom: 1px solid #e0e0e0;
			.form-group{
				margin: 0;
				position: relative;
			}
			.convo-search-input{
				padding-left: 34px;
				color: $grey800;
				background-color: $grey200;
				border-color: transparent;
				border-radius: 17px;
			}
			.convo-search-icon{
				position: absolute;
				top: 0; left: 0;
				display: block;
				width: 34px;
				line-height: 34px;
				font-size: 16px;
				text-align: center;
				color: $grey500;
			}
		}
		.inbox__list-convo__main{
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
			.single-prw-convo{
				display: block;
				display: flex;
				align-items: center;
				padding: 12px;
				border-bottom: $border;
				.sc__user-avatar{
					flex: 0 0 auto;
					min-width: 0;
					.avatar-wrapper{
						width: 48px;
						height: 48px;
						border-radius: 50%;
					}
				}
				.sc__convo-preview{
					@media (max-width: $screen-xs-max){
						display: none;
					}
					flex: 1 1 auto;
					min-width: 0;
					padding: 0 0 0 8px;
					.sc__user-title{
						line-height: 18px;
						font-size: 14px;
						font-weight: 500;
						color: $grey900;
					}
					.sc__convo-excerpt{
						margin: 1px 0 0;
						line-height: 17px;
						font-size: 13px;
						color: $grey700;

					}
				}
				.sc__convo-meta{
					@media (max-width: $screen-xs-max){
						display: none;
					}
					flex: 0 0 auto;
					min-width: 0;
					padding: 0 0 0 8px;
					text-align: right;
					.sc__single-meta{
						line-height: 16px;
						font-size: 11px;
						font-weight: 500;
						color: $grey400;
					}
				}
				&:hover, &:active, &:focus, &:visited{
					text-decoration: none;
				}
				&:hover{
					background-color: $grey100;
				}
				&.unread{
					background-color: $grey200;
				}
				&.active{
					background-color: material-color('orange','100');
				}
			}
			.load-all-messages{
				padding: 8px 12px;
				line-height: 14px;
				font-size: 11px;
				font-style: italic;
				color: $grey500;
				text-align: center;
				@media (max-width: $screen-xs-max){
					font-size: 10px;
					max-width: 68px;
				}
			}
		}
	}
	.inbox__current-convo{
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.current-convo__header{
			flex: 0 0 auto;
			min-height: 0;
			padding: 16px 12px;
			border-bottom: 1px solid #e0e0e0;
			.current-convo__user-info{
				margin: 0;
				padding: 0;
				line-height: 24px;
				font-size: 18px;
				font-weight: 500;
				color: $grey900;
				.user-avatar{
					display: inline-block;
					vertical-align: top;
					margin: 0 8px 0 0;
					width: 24px;
					height: 24px;
					background-color: $grey200;
					border-radius: 50%;
				}
				.user-title{
					display: inline-block;
					vertical-align: top;
					margin: 0;
					line-height: 24px;
					font-size: 18px;
					font-weight: 500;
					color: $grey900;
				}
			}
		}
		.current-convo__select-users{
			padding: 17px 12px;
			border-bottom: 1px solid #e0e0e0;
			.list-selected-users{
				font-size: 0;
				line-height: 22px;
				.single-selected-user{
					display: inline-block;
					vertical-align: top;
					.ssu__user-title{
						display: inline-block;
						vertical-align: top;
						line-height: 22px;
						font-size: 15px;
						color: $color-primary_text;
					}
					&:after{
						content: ",";
						display: inline-block;
						vertical-align: top;
						padding: 0 5px 0 1px;
						line-height: 22px;
						font-size: 16px;
						color: $grey400;
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
			}
			.cancel-group-chat{
				display: inline-block;
				vertical-align: top;
				line-height: 22px;
				font-size: 13px;
				color: $grey600;
				&:hover{
					text-decoration: none;
					color: $color-primary;
				}
			}
		}
		.current-convo__main{
			flex: 1 1 auto;
			min-height: 0;
			padding: 24px 12px 12px;
			overflow: auto;
			.list-message-in-convo{
				.single-message{
					position: relative;
					margin: 0 0 16px;
					padding: 0 0 0 36px;
					&:last-child{
						margin: 0;
					}
					.sm__user-avatar{
						position: absolute;
						bottom: 20px;
						left: 0;
						.avatar-wrapper{
							width: 28px;
							height: 28px;
							background-color: $grey200;
							border-radius: 50%;
						}
					}
					.sm__message-content{
						.user-single-input{
							margin: 0 0 6px;
							&:last-child{
								margin: 0;
							}
							.input__main{
								line-height: 34px;
								.input__main__content{
									display: inline-block;
									vertical-align: top;
									max-width: 80%;
									@media (min-width: $screen-sm-min){
										max-width: 70%;
									}
									&.input__main__content--text{
										padding: 7px 12px;
										line-height: 20px;
										font-size: 14px;
										color: $grey900;
										background-color: $grey100;
										border-radius: 14px;
									}
									&.input__main__content--image{
										line-height: 34px;
										.single-image-attachment{
											display: inline-block;
											vertical-align: top;
											max-width: 90%;
											@media (min-width: $screen-sm-min){
												max-width: 70%;
											}
										}
										img{
											display: block;
											max-height: 300px;
											border-radius: 14px;
											overflow: hidden;
										}
									}
								}
							}
							.input__meta{
								margin: 3px 0 0;
								padding: 0 12px;
								line-height: 14px;
								.input__meta__data{
									display: inline-block;
									vertical-align: top;
									max-width: 70%;
									line-height: 14px;
									font-size: 10px;
									color: $grey400;
								}
							}
							&.message-error{
								.input__main{
									opacity: .6;
								}
								.input__meta{
									.input__meta__data{
										color: $red600;
										font-weight: 500;
									}
								}
							}
						}
					}

					// from owner
					&.from-owner{
						padding: 0 36px 0 0;
						text-align: right;
						.sm__user-avatar{
							left: auto;
							right: 0;
						}
						.sm__message-content{
							.user-single-input{
								.input__main{
									text-align: right;
									.input__main__content{
										&.input__main__content--text{
											text-align: left;
											color: #fff;
											background-color: material-color('deep-orange','500');
										}
										&.input__main__content--image{
											text-align: right;
										}
									}
								}
							}
							.input__meta{
								text-align: right;
							}
						}
					}

					// typing loading
					.typing-loading{						
						height: 40px;
						background-image: url('../img/loading-typing.svg');
						background-size: 40px;
						background-repeat: no-repeat;
						background-position: center right;
					}
				}
			}
		}
		.current-convo__input{
			flex: 0 0 auto;
			min-height: 0;
			padding: 12px 12px;
			border-top: 1px solid #e0e0e0;
			.input-message-attachment{
				margin: 0;
				padding: 0 2px;
				line-height: 34px;
				font-size: 24px;
				color: $color-primary;
				&:hover{
					color: $color-primary_text;
				}
			}
			.input-message-text{
				padding-left: 0;
				padding-right: 0;
				border-color: transparent;
				resize: none;
			}
			.input-message-summit{
				margin: 0;
				padding: 0 2px;
				line-height: 34px;
				font-size: 24px;
				color: $color-primary;
				background-color: transparent;
				border: 0;
				&:hover{
					color: $color-primary_text;
				}
			}
		}
	}
	.inbox__user-info{
		display: none;
		flex: 0 0 280px;
		min-width: 0;
		border-left: 1px solid #ccc;
		@media (min-width: $screen-md-min){
			display: block;
		}
		.user-info-wrapper{
			margin-bottom: 12px;
			padding: 24px 12px;
			.user-info__avatar{
				text-align: center;
				.avatar-wrapper{
					display: inline-block;
					border: 2px solid $color-primary;
					border-radius: 50%;
					background-color: $grey50;						
					width: 168px;
					height: 168px;
				}
			}
			.user-info__main{
				margin: 12px 0 0;
				text-align: center;
				.user-info__title{
					margin: 0 0 0;
					line-height: 26px;
					font-size: 20px;
					font-weight: 500;
					text-align: center;
				}
				.user-info__contact{
					margin: 8px 0 0;
					.single-info{
						margin: 0 0 4px;
						&:last-child{
							margin: 0;
						}
						a{
							display: inline-block;
							vertical-align: top;
							&:hover{
								text-decoration: none;
							}
						}
						&:last-child{
							margin: 0;
						}
						.info-icon{
							display: inline-block;
							width: 26px;
							height: 26px;
							line-height: 26px;
							font-size: 16px;
							color: #fff;
							background-color: $grey800;
							border-radius: 50%;
							text-align: center;
							i{
								display: inline-block;
								line-height: 24px;
								padding-top: 2px;
							}
						}
						.info-data{
							line-height: 20px;
							font-size: 15px;
							font-weight: 500;
							color: $grey800;
						}
						&.single-info--verified{
							.info-icon{
								background-color: $color_primary;
							}
							.info-data{
								color: $color-primary_text;
							}
						}
					}
				}
			}
		}
	}
}