.chat-list {
	.item-list{
		padding: 0px;
		ul{
			min-height: calc(100vh - 21rem);
			max-height: calc(100vh - 21rem);
			overflow-y: scroll;
			overflow-x: hidden;
			padding: 0;
		}
	}
}

.chat-content {
	.chat-detail {
		padding: 4px 10px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.chat-content-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 12px;
	}
	.chat-title{
		padding-left: 10px;
	}
	.msg-list {
		padding-bottom: 0px;
	}
	.msg-content{
		min-height: calc(100vh - 18rem);
		max-height: calc(100vh - 18rem);
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: rgba($primary, .1);	
	}
}
.chat-icon{
	i{
		font-size: 20px;
	}
}

.chat-left-wrapper {
	.nav-tabs {
		.nav-item {
			width: 33.33%;
			text-align: center;
			.nav-link {
				padding: .5rem .5rem;
			}
		}
	}
}
.right-sidenav{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	min-width: 40%;
	background: $body-bg;
	border: 1px solid $border-color;
	z-index: 10;
	height: 100%;
	transform: translateX(100%);
	opacity: 0;
	transition: 500ms;
	&.active {
		opacity: 1;
		transition: 500ms;
		transform: translateX(0%);
	}
}
.dark {
	.right-sidenav {
		background: $dark-card-bg;
		border: 1px solid $dark-border-color;
	}
}
.chat-profile{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	.avatar {
		margin: 20px 0;
	}
}
@media screen and (max-width: 991px) {
	.chat-left-wrapper{
		position: absolute;
		top: 90px;
		left: 0;
		z-index: 1;
		transform: translateX(-100%);
		transition: all 0.2s;
		&.active {
			transition: all 0.2s;
			transform: translateX(0%);
		}
		.nav-tabs {
			.nav-item {
				width: 33.33%;
				text-align: center;
			}
		}
	}
	.chat-right-wrapper{
		width: 100%;
	}
}

//chat message
.mm-other-user, .mm-current-user {
    &.mm-message-body{
        display: flex;
        gap: 1rem;
        visibility: visible;
        .mm-chat-text{
            flex: 1;
        }
    }
}
.mm-current-user + .mm-current-user,
.mm-other-user + .mm-other-user {
    .mm-chating{
        display: none;
    }
}
.mm-current-user + .mm-current-user,
.mm-other-user + .mm-other-user {
    .chat-profile {
        visibility: hidden;
    }
}

.mm-chating-content {
    max-width: 80%;
    padding: 0.625rem 1rem;
    background-color: $primary;
	color: var(--white);
    // border: 1px solid $border-color;
    &.mm-image{
        padding: 1rem;
        .mm-group-image {
            grid-template-columns: repeat(2,minmax(100px,1fr));
        }
    }
    .mm-single-image {
        max-width: 100%;
        width: 30rem;
    }
}

.mm-other-user {
    .mm-chating-content{
        border-radius: 0px $border-radius-lg $border-radius-lg $border-radius-lg;
    }
}

.mm-current-user {
    flex-direction: row-reverse;
    text-align: right;
    .mm-chating{
        display: flex;
        justify-content: flex-end;
    }
    .mm-chating-content{
        border-radius: $border-radius-lg 0px $border-radius-lg $border-radius-lg;
    }
    .chat-profile{
        display: none;
    }
}

.chat-day-title {
    position: sticky;
    top: .5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: auto;
    > .main-title {
        text-align: center;
        min-width: 7.5rem;
        max-width: 7.5rem;
        margin: auto;
        padding: .25rem .5rem;
        // background: var(--white);
        border-radius: $rounded-pill;
        border: $border-width solid $border-color;
    }
}