//	=================
//    	Imports
//	=================

@import '../base/color_variables';   	// Color Variables
@import '../base/fonticons';   			// Fonticons Variables
@import '../base/urls';   				// URLS Variables
@import '../base/utilities_variables';  // Utilities Variables


/*
    Chat Section

*/
.chat-section {
	.card.usr-profile {
		border: none;
		.usr-profile-section {
			border-bottom: $b-width-1 $solid $color_6;
			.usr-img {
				img {
					border-radius: 50%;
					margin-top: 0px;
					border: $solid $b-width-5 #e3deff;
				}
			}
			.usr-name {
				color: $color_56;
				font-weight: 600;
				font-size: 1.125rem;
			}
			.usr-email {
				color: $additional-color-11;
				margin-bottom: 30px;
			}
			.options {
				cursor: pointer;
				i {
					font-size: 20px;
					padding: 8px;
					color: $additional-color-2;
					background-color: $color_54;
					border-radius: 50%;
					margin-left: 12px;
					&:hover {
						box-shadow: $shadow-1;
					}
				}
			}
		}
		/*  Media */
		.usr-media-files {
			border-bottom: $b-width-1 $solid $color_6;
			h4 {
				font-size: 18px;
				color: $additional-color-11;
				font-weight: 600;
				margin: 0 0 32px 0;
			}
			ul {
				li {
					margin-right: 5px;
					img {
						width: 56px;
						height: 56px;
						margin-bottom: 15px;
						border-radius: 10px;
						margin-top: 0px;
						-webkit-transition: all 0.35s ease;
						transition: all 0.35s ease;
						&:hover {
							-webkit-transform: translateY(-5px) scale(1.02);
							transform: translateY(-5px) scale(1.02);
						}
					}
				}
			}
		}
		/*  Group Status */
		.usr-group-status {
			h4 {
				font-size: 18px;
				color: $additional-color-11;
				font-weight: 600;
				margin: 0 0 32px 0;
			}
			ul {
				font-size: 15px;
				color: $black;
				li.media {
					cursor: pointer;
					img {
						width: 43px;
						height: 43px;
						border-radius: 50%;
					}
					.media-body {
						h5 {
							font-weight: 600;
							margin-top: 8px !important;
							color: $additional-color-2;
							font-size: 0.875rem;
						}
						p {
							font-size: 12px;
							color: $additional-color-6;
							font-weight: 600;
						}
					}
					&:hover {
						.media-body {
							h5 {
								color: $primary;
							}
						}
					}
				}
			}
		}
	}
	.card {
		/*
		    ================
		        Status List
		    ================
		*/
		.status-list-section {
			border: none;
			border-right: $b-width-1 $solid $color_6;
			form.form-inline {
				input {
					padding-left: 30px;
					border-radius: 20px;
					border-color: $light-gray;
					&::-webkit-input-placeholder {
						color: $additional-color-6;
						font-size: 14px;
					}
					&::-ms-input-placeholder {
						color: $additional-color-6;
						font-size: 14px;
					}
					&::-moz-placeholder {
						color: $additional-color-6;
						font-size: 14px;
					}
				}
				position: $pos-rel;
				&:before {
					position: $pos-abs;
					font-family: $font_family_1;
					content: '\f193';
					top: 10px;
					left: 10px;
				}
			}
			ul {
				font-size: 15px;
				color: $black;
				li.media {
					border-left: $b-width-2 $solid $color_none;
					padding: 0 12px;
					cursor: pointer;
					position: $pos-rel;
					&:hover {
						border-left: $b-width-2 $solid $primary;
						.media-body {
							h5 {
								color: $black;
							}
						}
					}
					.message-badge.single-value {
						padding: 5px;
						padding-top: 1px;
					}
					.message-badge {
						position: $pos-abs;
						z-index: 2;
						right: 8px;
						top: 18px;
						font-weight: 600;
						width: 17px;
						height: 17px;
						border-radius: 50%;
						padding: 2px;
						font-size: 10px;
						padding-top: 1px;
						background-color: $primary;
						color: $white;
						line-height: 1.4;
					}
					img {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						margin-top: 0px;
					}
					.media-body {
						h5 {
							font-weight: 600;
							color: $additional-color-11;
							font-size: 0.875rem;
						}
						p {
							font-size: 12px;
							color: $additional-color-6;
							font-weight: 600;
						}
					}
				}
				li.media.online {
					&:before {
						background-color: $color_165;
					}
				}
				li.media.offline {
					&:before {
						background-color: $color_149;
					}
				}
			}
		}
	}
	.chat-status {
		h4 {
			margin: 0;
			margin-bottom: 30px;
			font-weight: 600;
			color: $additional-color-11;
		}
		ul {
			padding-bottom: 20px;
			margin-bottom: 25px;
			border-bottom: $b-width-1 $solid $light-gray;
			li {
				position: $pos-rel;
				i {
					color: $color_38;
					vertical-align: sub;
					margin-right: 10px;
					margin-left: 10px;
				}
			}
			li.chat-online-usr {
				&:before {
					content: "";
					position: $pos-abs;
					background-color: $color_165;
					height: 10px;
					content: attr(alt);
					position: $pos-abs;
					display: block;
					right: 4px;
					top: 0;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					z-index: 5;
				}
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					border: $b-width-2 $solid $white;
					margin-left: -21px;
				}
			}
		}
	}
}

/*
========================
    Mail Chat System
========================
*/
.mail-chat-system {
	border: none;
	h4 {
		margin: 0;
		margin-bottom: 40px;
		color: $additional-color-2;
		font-weight: 600;
		font-size: 15px;
	}
	.top_menu {
		padding-bottom: 26px;
		.options {
			display: inline-block;
			cursor: pointer;
			i {
				font-size: 20px;
				padding: 8px;
				color: $white;
			    background-image: linear-gradient(-20deg, #3232b7 0%, #1a73e9 100%);
			    background-color: $additional-color-2;
				border-radius: 50%;
				margin-left: 12px;
				vertical-align: middle;
				&:hover {
					box-shadow: $shadow-5;
				}
			}
		}
	}
	.add-chat {
		button {
			i {
				font-size: 16px;
				margin-right: 6px;
			}
		}
	}
	.chat-messages {
		position: $pos-rel;
		height: 674px;
		overflow-y: scroll;
		list-style: none;
		padding: 20px 10px 0px;
		margin: 0px;
		.message.left {
			position: $pos-rel;
			.text {
				margin-left: 38px;
				background-color: $color_54;
				color: $black;
				border-radius: 1.875rem !important;
				border-top-left-radius: 0px !important;
				padding: 12px;
				margin-top: 65px;
				margin-bottom: 65px;
				box-shadow: $shadow-3;
			}
			.avatar {
				position: $pos-abs;
				top: -50px;
				left: 12px;
				border-radius: 50%;
				background-image: $url_9;
				float: left;
				background-repeat: no-repeat;
				background-size: cover;
				height: 44px;
				width: 44px;
			}
		}
		.message.right {
			position: $pos-rel;
			.text {
				margin-right: 38px;
			    background-color: $light-primary;
			    color: $primary;
				border-radius: 1.875rem !important;
				border-top-right-radius: 0px !important;
				padding: 12px;
				margin-top: 16px;
				box-shadow: $shadow-3;
			}
			.avatar {
				position: $pos-abs;
				float: right;
				background-image: $url_10;
				background-repeat: no-repeat;
				background-size: cover;
				right: 22px;
				top: -50px;
				height: 44px;
				width: 44px;
				border-radius: 50%;
			}
		}
		&::-moz-scrollbar {
			width: 6px;
			height: 6px;
		}
		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}
		&::-moz-scrollbar-button {
			&:start {
				&:decrement {
					height: 0px;
					height: 0px;
					display: block;
					display: block;
					background-color: $light-gray;
					background-color: $light-gray;
				}
			}
		}
		&::-webkit-scrollbar-button {
			&:start {
				&:decrement {
					height: 0px;
					display: block;
					background-color: $light-gray;
				}
			}
			&:end {
				&:increment {
					height: 0px;
					display: block;
					background-color: $light-gray;
				}
			}
		}
		&::-moz-scrollbar-track-piece {
			background-color: $color_none;
		}
		&::-webkit-scrollbar-track-piece {
			background-color: $color_none;
			-webkit-border-radius: 6px;
		}
		&::-moz-scrollbar-thumb {
			&:vertical {
				height: 6px;
				background-color: $light-gray;
				-webkit-border-radius: 6px;
			}
			&:horizontal {
				width: 6px;
				background-color: $light-gray;
				-webkit-border-radius: 3px;
			}
		}
		&::-webkit-scrollbar-thumb {
			&:vertical {
				height: 6px;
				background-color: $light-gray;
				-webkit-border-radius: 6px;
			}
			&:horizontal {
				width: 6px;
				background-color: $light-gray;
				-webkit-border-radius: 3px;
			}
		}
	}
	.chat-bottom-section {
		width: 100%;
		background-color: $color_164;
		position: $pos-rel;
		bottom: 0px;
		margin-top: 75px;
		.message_input_wrapper {
			background-color: $white;
			.input-group-prepend {
				>.input-group-text {
					background-color: $color_54;
					padding: 4px;
					border: none;
					font-size: 20px;
					cursor: pointer;
					i {
						color: $additional-color-6;
						font-size: 18px;
					}
				}
			}
			.input-group-append {
				>.input-group-text {
				    background-image: linear-gradient(-20deg, #3232b7 0%, #1a73e9 100%);
				    background-color: #3232b7;;
					padding: 12px;
					border: none;
					color: $white;
					border-bottom-right-radius: 4px !important;
					border-top-right-radius: 4px !important;
				}
			}
			.message_input {
				border: none;
				background-color: $color_139;
				&::-webkit-input-placeholder {
					color: $additional-color-6;
					font-size: 14px;
					text-align: center;
				}
				&::-ms-input-placeholder {
					color: $additional-color-6;
					font-size: 14px;
					text-align: center;
				}
				&::-moz-placeholder {
					color: $additional-color-6;
					font-size: 14px;
					text-align: center;
				}
			}
		}
	}
}
@media (max-width: 767px) {
	.chat-section {
		.card {
			.status-list-section {
				border-right: none;
			}
		}
	}
}