.uxper-messages {
	@include d-flex();
	border: 1px solid $border-color;
	border-radius: 16px;

	.mess-tab-head{
		@include d-flex();
		@include justify-content-between();
		@include align-items-center();
		padding: 32px;
		.mess-refresh{
			font-size: 14px;
			font-weight: 500;
			color: $accent_color;
			cursor: pointer;
			span{
				padding-left: 5px;
			}
		}
	}

	.mess-list {
		@include flex(0 0 370px);
		border-right: 1px solid $border-color;
		&.empty{
			height: 570px;
			.tab-list-mess{
				padding-left: 32px;
				padding-top: 32px;
			}
			.tab-info .no-mess{
				margin-bottom: 0;
				text-align: center;
				padding-top: 207px;
				color: $primary_color;
				font-weight: 500;
			}
		}
	}

	.mess-content {
		width: 100%;
		@include flex(1);
		&.empty{
			@include d-flex();
			@include align-items-center();
			@include justify-content-center();
			@include flex-column();
			text-align: center;
			h2{
				font-size: 24px;
				margin-top: 22px;
				margin-bottom: 7px;
			}
			p{
				margin-bottom: 24px;
			}
		}
	}

	.tab-list{
		margin-bottom: 18px;
		padding-left: 32px;
		padding-top: 32px;
	}

	.thumb {
		position: relative;
		img {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			object-fit: cover;
		}

		&:before {
			content: "";
			display: none;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid #fff;
			background-color: #3ab446;
			position: absolute;
			left: 0;
			top: 0;
		}

		&.online {
			&:before {
				display: block;
				background-color: #3ab446;
			}
		}

		&.offline {
			&:before {
				display: block;
				background-color: #ed0006;
			}
		}
	}

	.uname {
		font-weight: 500;
		color: $primary_color;
	}

	.date {
		font-size: 14px;
	}

	.tab-mess{
		.tab-list-mess{
			@include d-inline-flex();
			list-style: none;
			margin-bottom: 0;
			padding-left: 0;
		}
		.tab-item{
			position: relative;
			&:hover,
			&.active{
				a{
					color: $accent_color;
				}
				&:before{
					width: 100%;
				}
			}
			&:before{
				left: 0;
				content: '';
				height: 2px;
				background-color: $accent_color;
				bottom: 0;
				display: block;
				position: absolute;
				width: 0;
				@include transition(width .3s);
			}
			+ .tab-item{
				margin-left: 32px;
			}
			a{
				font-size: 18px;
				color: $secondary_color;
				font-weight: 500;
			}
		}
	}

	.tab-content{
		height: 500px;
		overflow: auto;
	}

	.tab-info {
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		ul li {
			position: relative;
			display: flex;
			color: #999;
			padding: 16px 32px;

			+ li{
				&:after {
					content: "";
					height: 1px;
					display: block;
					position: absolute;
					background-color: $border-color;
					top: 0;
					left: 32px;
					right: 32px;
				}
			}

			&:hover{
				cursor: pointer;
			}

			&.active {
				background: rgba(0, 116, 86, 0.05);

				&:before {
					content: "";
					width: 2px;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					background-color: $accent_color;
				}
			}

			&.unread{
				.desc{
					color: red;
				}
			}
		}

		.thumb {
			flex: 0 0 36px;
		}

		.detail {
			padding-left: 12px;
			width: 100%;
		}

		.desc{
			line-height: 1.5;
		}

		.name {
			@include d-flex();
			@include flex-wrap();
			@include align-items-center();
			@include justify-content-between();
			padding-bottom: 8px;
		}
	}

	.mess-content {
		&__head {
			@include d-flex();
			@include align-items-center();
			@include justify-content-between();
			padding: 32px;
			border-bottom: 1px solid $border-color;

			.thumb {
				flex: 0 0 48px;

				img {
					width: 48px;
					height: 48px;
				}
			}

			.left {
				@include d-flex();
			}

			.right{
				@include d-flex();
				@include align-items-center();
			}

			.detail {
				padding-left: 12px;
			}

			.info {
				font-size: 14px;
			}
		}

		.action-setting {
			margin-left: auto;
			position: relative;
			.icon-setting {
				padding-left: 10px;
				font-size: 24px;
				cursor: pointer;
			}
			i {
				margin-right: 0;
			}
		}
		.action{
			font-size: 18px;
			+ .action{
				margin-left: 30px;
			}
		}
		.action-dropdown {
			display: none;
			position: absolute;
			background-color: #fff;
			@include box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.05));
			list-style: none;
			right: 100%;
			top: 7px;
			text-align: right;
			z-index: 2;
			padding-left: 0;
			border: 1px solid $border_color;
			margin-bottom: 0;
			li{
				&:hover {
					background-color: rgba(0,116,86,.05);
					cursor: pointer;
				}
			}
			a {
				padding: 5px 15px;
				font-size: 14px;
			}
		}

		&__body {
			padding: 32px;
			height: 350px;
			overflow: auto;

			.card-mess {
				@include d-flex();

				+ .card-mess {
					padding-top: 12px;
				}

				.thumb {
					flex: 0 0 36px;
				}

				.detail {
					padding-left: 12px;
					max-width: 320px;

					.name {
						display: flex;
						align-items: center;
						padding-top: 6px;
						padding-bottom: 6px;
					}

					span {
						position: relative;
					}

					.date {
						padding-left: 20px;
					}

					.date:before {
						content: "";
						width: 4px;
						height: 4px;
						border-radius: 10px;
						background-color: #eee;
						display: block;
						position: absolute;
						top: 50%;
						left: 8px;
						@include transform(translateY(-50%));
					}

					.desc {
						padding: 16px 24px;
						background: #f9f9f9;
						border-radius: 8px;
						margin-top: 5px;
					}
				}
			}

			.card-send {
				flex-direction: row-reverse;

				.detail {
					padding-left: 0;
					padding-right: 12px;

					.name {
						@include flex-row-reverse();
					}

					.uname {
						padding-left: 20px;
					}

					.uname:before {
						content: "";
						width: 4px;
						height: 4px;
						border-radius: 10px;
						background-color: #eee;
						display: block;
						position: absolute;
						top: 50%;
						left: 8px;
						@include transform(translateY(-50%));
					}

					.date {
						padding-left: 0;
					}

					.date:before {
						display: none;
					}

					.desc {
						background-color: $accent_color;
						color: #fff;
					}
				}
			}
		}

		&__action {
			position: relative;
			border-top: 1px solid $border-color;

			textarea {
				padding: 45px 110px 45px 32px;
				height: 120px;
				border: 0;
			}

			button {
				position: absolute;
				right: 0;
				top: 0;
				border: 0;
				background-color: $accent_color;
				color: #fff;
				padding: 9px 24px;
				border-radius: 30px;
				top: 40px;
				right: 32px;
				cursor: pointer;
			}
		}
	}

	.icon-nav-mess{
		display: none;
	}

    .civi-loading-effect{
      z-index: 8;
    }
}

@media (max-width: 767px) {
	.uxper-messages{
		&.open-nav{
			.mess-list{
				@include transform(translateX(0));
			}
			.bg-overlay{
				visibility:unset;
				opacity: 1;
			}
		}
		.mess-list{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			height: 100vh;
			z-index: 9;
			background-color: #fff;
			width: 300px;
			@include transform(translateX(-101%));
			@include transition(all 0.3s);
			&.empty{
				display: none;
			}
			.icon-nav-mess{
				color: #fff;
				background-color: $accent_color;
				position: fixed;
				padding: 8px 10px;
				left: 300px;
				top:30%;
				z-index: 2;
				width: 50px;
				height: 50px;
				@include d-flex();
				@include align-items-center();
				@include justify-content-center();
				@include transform(translateY(-50%));
				border-radius: 0 5px 5px 0;
				i{
					font-size: 25px;
					font-weight: 300;
				}
			}
			&.open-nav{
				@include transform(translateX(0));
			}
		}
		.mess-content.empty{
			padding: 80px 15px;
		}
		.tab-mess .tab-item+.tab-item {
			margin-left: 20px;
		}
		.mess-tab-head{
			padding: 24px;
		}
		.tab-info ul li {
			padding-left:24px;
			padding-right:24px;
		}
	}
}
