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

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


/*  Tab section     */
h4 {
	font-size: 1.125rem;
}
.tab-title {
	background-color: $white;
	padding: 20px;
	.nav-pills {
		.nav-item {
			.dropdown-menu {
				box-shadow: $shadow-3;
			}
		}
		.nav-link.active {
			background-color: $color_none;
			color: $color_57;
			font-weight: 600;
		}
		.show {
			>.nav-link {
				background-color: $color_none;
				color: $color_57;
				font-weight: 600;
			}
		}
		a.nav-link {
			i {
				font-weight: 600;
				font-size: 15px;
				color: $dark;
			}
		}
	}
	/*Mail Labels*/
	li.mail-labels {
		a.dropdown-item {
			&:hover {
				background-color: $white;
				color: $color_57;
			}
		}
		.label {
			&:after {
				position: $pos-abs;
				content: "";
				height: 8px;
				width: 8px;
				border-radius: 50%;
				right: 15px;
				top: 43%;
			}
		}
		.label-personal {
			&:after {
				background-color: $color_86;
			}
		}
		.label-work {
			&:after {
				background-color: $additional-color-3;
			}
		}
		.label-account {
			&:after {
				background-color: $info;
			}
		}
		.label-social {
			&:after {
				background-color: $additional-color-5;
			}
		}
	}
}

/*
    =========================
        Inbox Section
    ==========================
*/

.mail-section {
	padding: $p-20 $p-20 $p-20 $p-20;
	position: $pos-rel;
	background-color: $white;
}
.inbox-section {
	.search {
		input {
			border-radius: 20px;
			height: 30px;
			border-color: $light-gray;
		}
	}
	.heading-title {
		margin: 0;
		font-weight: 600;
		color: $additional-color-11;
	}
	.inbox-options {
		ul.list-inline {
			li {
				cursor: pointer;
				div.dropdown {
					&:hover {
						color: $color_48;
					}
				}
				.chk-all {
					.dropdown {
						.dropdown-item {
							&:focus {
								background-color: $white;
								color: $color_57;
							}
							&:hover {
								background-color: $white;
								color: $color_57;
							}
						}
					}
				}
				.dropdown {
					.d-icon-none.dropdown-toggle {
						&:after {
							display: none;
						}
					}
				}
				i {
					font-size: 17px;
					vertical-align: $v-align-super;
					margin-right: 5px;
				}
				&:hover {
					i {
						color: $color_48;
					}
				}
			}
		}
	}
	nav.mail-pagination {
		ul.pagination {
			margin: 0;
		}
	}
	.messages-section {
		.media {
			cursor: pointer;
			&:not(:last-child) {
				border-bottom: $b-width-1 $solid #f1f2f1;
			}
			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				border: $solid $b-width-2 #fd6e69;
			}
			.media-body {
				h5.message-usr-name {
					font-weight: 600;
					color: $color_56;
					font-size: 13px;
					margin-bottom: 5px;
				}
				h6.message-meta-time {
					font-weight: 600;
					color: $additional-color-6;
					margin-bottom: 17px;
					font-size: 12px;
				}
				h5.message-title {
					font-weight: 600;
					color: $additional-color-11;
					margin-bottom: 5px;
					font-size: 15px;
				}
				p.message-body {
					color: $additional-color-6;
					font-size: 13px;
				}
			}
			&:hover {
				.media-body {
					h5.message-usr-name {
						color: $color_57;
					}
					h5.message-title {
						color: $color_57;
					}
				}
			}
		}
		div.mark-star {
			.custom-control-label {
				&::before {
					font-family: $font_family_1;
					content: "\f2ba";
					top: 0;
					left: 17px;
					background-color: $color_none;
					color: $color_88;
					font-size: 13px;
					font-weight: 600;
				}
			}
		}
		div.mark-star.custom-checkbox {
			.custom-control-input {
				&:checked~.custom-control-label {
					&::before {
						font-family: $font_family_1;
						content: "\f2c8";
						background-color: $color_none;
						left: 17px;
						color: $color_88;
					}
				}
			}
			.custom-control-label {
				&::after {
					background-image: none;
					left: 17px;
				}
			}
		}
	}
}
.d-icon-none.dropdown-toggle {
	&:after {
		display: none;
		display: none;
	}
}
ul.pagination {
	li.non-hover {
		a {
			padding-left: 0;
			&:hover {
				&:not(.active) {
					background-color: $color_none;
					color: $color_57;
				}
			}
		}
	}
	li {
		a.page-link {
			&:focus {
				box-shadow: none;
			}
		}
	}
}
.custom-control.mark-star {
	padding-left: 0;
}
.mark-star {
	label.custom-control-label {
		display: block;
	}
}

/*
    =====================
        Read Section
    =====================
*/

.read-section {
	position: $pos-rel;
	padding: $p-20 $p-20 $p-0 $p-20;
	border-left: $b-width-1 $solid $color_6;
	border-right: $b-width-1 $solid $color_6;
	background-color: $white;
	.read-options {
		color: $color_57;
		cursor: pointer;
		i {
			font-size: 18px;
			padding-left: 18px;
			&:hover {
				color: $color_48;
			}
		}
		.dropdown {
			.dropdown-menu {
				box-shadow: $shadow-3;
				a.dropdown-item {
					&:hover {
						background-color: $white;
						color: $color_57;
					}
				}
			}
		}
	}
	/*      Message Timeline    */
	.messages-timeline {
		.messages {
			.media {
				border-bottom: $b-width-1 $solid $color_6;
				color: $color_170;
				img {
					width: 52px;
					height: 52px;
				}
				h5 {
					font-size: 14px;
					margin-bottom: 3px;
					color: $color_57;
				}
				.media-body {
					.messages-meta-date {
						margin-bottom: 2px;
						font-size: 13px;
					}
					.messages-to {
						font-size: 13px;
					}
				}
			}
			.message-body {
				.strong {
					color: $additional-color-2;
				}
				p {
					color: $color_170;
					font-size: 13px;
				}
			}
		}
	}
}

/*
    ======================
        Chat Section
    ======================
*/
.chat-section {
	.chat-status {
		h4 {
			margin: 0;
			margin-bottom: 30px;
			font-weight: 600;
			color: $additional-color-11;
		}
		ul {
			padding-bottom: $p-20;
			li {
				position: $pos-rel;
				i {
					color: $color_83;
					vertical-align: $v-align-sub;
					cursor: pointer;
				}
				&:hover {
					i {
						color: $color_48;
					}
				}
			}
			li.chat-online-usr {
				&:before {
					content: "";
					position: $pos-abs;
					background-color: $success;
					height: 10px;
					content: attr(alt);
					position: $pos-abs;
					display: block;
					right: 7px;
					top: 7px;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					z-index: 5;
				}
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					border: $b-width-2 $solid $white;
					box-shadow: $shadow-18;
					margin-left: -21px;
					margin-top: 6px;
				}
			}
		}
	}
}
/*      Chat  */
.mail-chat-system {
	.top_menu {
		background-color: $color_164;
		width: 100%;
		border-bottom: $solid $b-width-1 $color_6;
		.title {
			color: $color_56;
			font-weight: 600;
			margin-bottom: 12px;
		}
	}
	.chat-messages {
		position: $pos-rel;
		height: 575px;
		overflow-y: scroll;
		list-style: none;
		padding: $p-20 $p-10 $p-0;
		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: 48px;
				margin-bottom: 48px;
				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: 65px;
				margin-bottom: 65px;
				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;
			box-shadow: 0px 0px 7px 0px $light-gray;
			.input-group-prepend {
				>.input-group-text {
					background-color: $color_none;
					padding: 4px;
					border: none;
					font-size: 20px;
					cursor: pointer;
					i {
						color: $additional-color-6;
						font-size: 18px;
					}
				}
			}
			.input-group-append {
				>.input-group-text {
					background-color: $color_57;
					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_none;
			}
		}
	}
}
@media (max-width: 767px) {
	.read-section {
		border: none;
	}
}

@media (max-width: 1652px) {
    .mail-chat-system .chat-messages {
        height: 1120px;
    }
}
@media (min-width: 1653px) {
    .mail-chat-system .chat-messages {
        height: 822px;
    }
}