
.event-chat-ryt{

    .chat-area{
        .chat-reciver, 
        .chat-sender {
            margin-bottom: 1.875rem;
            padding: 0;
            img{
                border-radius: 1.875rem;
            }
        }

        .media {
            position: relative;

            &-body {

                p {
                    margin: 0;
                    max-width: 100%;
                    display: inline-block;
                    position: relative;

                    span {
                        padding: 1rem;
                        display: inline-block;
                        top: 103%;
                        position: relative;
                        border: 0.0625rem solid $border;
                    }
                }
            }
        }
    }

    .chat-reciver{
        padding: .5rem 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;

        .media {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;

            .media-body {
                margin-#{$dz-pos-right}: 2rem;
                text-align: #{$dz-pos-right};

              

                p {
                    background: $white;
                    margin-bottom: 0;
                    border-radius: 0.3125rem 0.3125rem 0 0.3125rem;

                    span {
                        text-align: #{$dz-pos-left};
                        border: 0.0625rem solid $border;
                        
                        &::after{
                            content: "";
                            width: 1.25rem;
                            height: 1.25rem;
                            border-bottom: 0.0625rem solid $border;
                            border-#{$dz-pos-right}: 0.0625rem solid $border;
                            position: absolute;
                            #{$dz-pos-right}: 0;
                            bottom: 0;
                            background: $white;
                            -webkit-transform: rotate(-45deg) translateX(15px);
                                    transform: rotate(-45deg) translateX(15px);

                           
                        }
                        
                    }
                    
                    .time {
                        position: absolute;
                        font-size: 0.75rem;
                        color: $body-color;
                        font-weight: 400;
                        bottom: 0;
                        #{$dz-pos-left}: -5rem;

                       
                    }
                }
            }
        }
    }

    .chat-sender{
        text-align: #{$dz-pos-left};
        padding: .5rem 1rem;
        .media {

            .media-body {
                margin-#{$dz-pos-left}: 2rem;
                p {
                    background-color: $white;
                    margin-bottom: 0;
                    span {
                        
                        &::after {
                            content: "";
                            width: 1.25rem;
                            height: 1.25rem;
                            border-bottom: 0.0625rem solid $border;
                            border-#{$dz-pos-left}: 0.0625rem solid $border;
                            position: absolute;
                            #{$dz-pos-left}: 0;
                            bottom: 0;
                            background: $white;
                            -webkit-transform: rotate(45deg) translateX(-15px);
                                    transform: rotate(45deg) translateX(-15px);

                            
                        }
                    }

                    .time {
                        position: absolute;
                        font-size: 0.625rem;
                        color: $body-color;
                        font-weight: 400;
                        bottom: 0;
                        #{$dz-pos-right}: -5rem;

                       
                    }

                }
            }
        }

    }
}

.char-type{
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;

    form{
        
        .form-control{
            height: 2.8125rem;
            padding-#{$dz-pos-left}: 1.125rem;
            background: $body-bg;
            border-#{$dz-pos-right}: 0;
        }

        .input-group{

            &-append{
                i{
                    color: $gray;
                    font-size: 1.125rem;
                }
                .input-group-text{
                    padding-#{$dz-pos-left}: .7rem;
                    padding-#{$dz-pos-right}: .7rem;
                    background: $body-bg;
                    border-color: $border;
                    border-#{$dz-pos-left}: 0;

                    &:last-child{
                        padding-#{$dz-pos-right}: 1.8rem;
                    }
                }
            }
        }
    }
}

.media-avatar{
    padding: 1.5625rem 0;
    border-bottom: 0.0625rem solid $border;
    &:last-child{
        border-bottom: 0rem;
    }
    p{
        margin-bottom: 0;
    }
    .avatar-status{
        position: relative;
        i{
            position: absolute;
            #{$dz-pos-right}: 0;
            bottom: 0;
        }
    }
}



// file

.chat-left-area{
	.chat-sidebar{
		height: calc(100vh - 82px);
		@include respond ('tab-land'){
			height: calc(100vh - 5.9rem);
		}
		@include respond ('phone-land'){
			box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.05);
		}
		border-right: 1px solid var(--border);
		border-top: none;
		background-color: var(--light);
	}
}
.message-body{
	min-height:auto!important;
}

.message-box{
	.input-group-text{
		height:3rem;
	}
	
    padding-top: 1rem;
	padding-bottom: 1rem;
	img{
		height:5rem;
		width:5rem;
		border-radius:$radius;
	}
	span{
		font-size:1.125rem;
	}
	.chat-hamburger {
		display: flex;
		align-items: center;
		
	}
	&.style-1{
		padding:1rem;
		border:0;
		height: 5rem;
		@include respond('phone'){
			height: auto;
		}
		h4{
			margin-bottom:.25rem;
			@include respond ('phone'){
				margin-bottom:0;
				font-size: 0.938rem;
			}
		}
		span{
			font-size:14px;
		}
		img{
			height:3rem;
			width:3rem;
			@include respond ('phone'){
				height: 3rem;
				width: 3rem;
			}
		}
	}
	@include respond ('phone'){
		img{
			height: 3rem;
			width: 3rem;
		}
		h3{
			font-size: 1rem;
		}
		span{
			font-size: .85rem;
		}
	}
	
}
.chat-people{
	padding:1.25rem 0;
}
.chat-tabs{
	ul{
		padding: 1rem 0;
	}
	.chat-bx.chats{
		position: relative;
		.chat-img{
			position: relative;
		
			&::before{
				content: '';
				display: block;
				background-color: #1EBA62;
				border: 2px solid $white;
				position: absolute;
				bottom: -2px; 
				right: -2px;
				width: 1.125rem;
				height: 1.125rem;
				border-radius: 50%;
			}
			
		}
	}
	.chat-bx{
		padding: 0.625rem 0;
		position:relative;
		z-index:1;
		display:flex;
		cursor:pointer;
		
		margin-bottom: 0.5rem;
		img{
			width: 50px;
			height: 50px;
			border-radius: $radius;

		}
		
		.mid-info{
			width: calc(100% - 9rem);
			
			@include respond ('laptop'){
				width: calc(100% - 8rem);
			}
		}
		
		.chat-img{
			position: relative;
			margin-right: 1rem;
			img{
				height: 3rem;
				width: 3rem;
				border-radius:$radius;
				margin-right: 0rem;
				object-fit: cover;
				@include respond ('laptop'){
					height: 3rem;
					width: 3rem;
				}
			}
			.active{
				height:1rem;
				width:1rem;
				border:0.125rem solid var(--card);
				border-radius:0.25rem;
				background:$secondary;
				position: absolute;
				bottom: -0.0625rem;
				right: 1rem;
			}
		
		}
		.badge {
			border-radius:0.375rem;
		}
		&:last-child{
			border-bottom:0;
		}
		@include respond ('laptop'){
			padding: .75rem 0;
		}
		&:after{
			content:none;
			position:absolute;
			top:0;
			left:0;
			height: calc(100% + 4px);
			width: calc(100% + 30px);
			z-index:-1;
			background-color:var(--body-bg);
			border-radius:$radius;
			margin: -2px -15px;
		}
		&:hover,
		&.active{
			&::before{
				content: '';
				display: none;
			}
			&:after{
				content:"";
			}
			.mid-info{
				h4{
					color:var(--primary);
				}
			}
		}
	}
}
.chat-box-area{
	height: calc(100vh - 17.125rem);
    overflow-y: scroll;
	.media{
		.message-received {
			width: 62%;
			text-align: left;
		
				p{
					background:var(--card);
					text-align: left;
					border-radius:$radius;
					border-top-left-radius: 0;
					padding: 0.625rem 1.25rem;
					display: table;
					color: var(--text-dark);
				}
				.dz-media{
					width: 22.75rem;
					height: 15.375rem;
					padding: 0.625rem;
					background-color: var(--card);
				}
			@include respond('phone'){
				width:100%;	
			}
		}
	}
	.message-sent{
		width: 62%;
		text-align: right;
		max-width: 83%;
		@include respond ('tab-port'){
			width: 84%;
		}
		span{
			display:block;
		}
	}
	.message-sent p{
		background: var(--primary);
		text-align: left;
		border-radius:$radius;
		border-top-right-radius: 0;
		padding: 0.625rem 1.25rem;
		color: $white;
		display:inline-block;
	}
	&.style-1{
		height: 21.5rem;
		.message-received {
			p{
				background:#eeee;
				font-size:0.875rem;
			}
		}
		.message-sent{
			p{
				background:var(--primary);
				font-size:0.875rem;
				color:$white;
			}
		}
	}
	@include respond ('tab-land'){
		height: calc(100vh - 1.9rem);
	}
	@include respond ('phone'){
		height: calc(100vh - 12.8rem);
	}
}


.chat-icon{
	border-bottom:0.0625rem solid #F0F0F0;
	padding-bottom:1.5625rem;
	ul{
		display: flex;
		justify-content: space-around;
		li{
			a{
				height:3rem;
				width:3rem;
				background:#F0F0F0;
				line-height:3rem;
				display:block;
				border-radius:$radius;
				text-align:center;
				&:hover{
					background:var(--primary);
					svg{
						path{
							fill:$white;
						}
					}
				}
			}
		}
	}
}

.share-files{
	border-bottom:0.0625rem solid #F0F0F0;
	padding-bottom: 1.125rem;
	&:last-child{
		border-bottom:0;
	}
	ul{
		li{
			display:flex;
			justify-content:space-between;
			align-items:center;
			padding: 0.5625rem 0;
			cursor: pointer;
			&:first-child{
				padding-top:0;
			}
			h4{
				white-space:nowrap;
			}
			& > div{
				flex:1;
			}
		}
	}
}
.file{
	height:2.5rem;
	width:2.5rem;
	min-width:2.5rem;
	line-height:2.4rem;
	text-align:center;
	background:#F0F0F0;
	display:block;
	border-radius:$radius;
	svg{
		height:1.5rem;
		width:1.5rem;
	}
	
	
}
.share-widget{
	height: calc(100vh - 11.25rem);
    overflow: hidden;
	@include respond ('laptop'){
		box-shadow: 0 0 30px 5px rgba(0,0,0,.05);
	}
	@include respond ('tab-land'){
		height: calc(100vh - 9.25rem);
	}
}

.file-list{
	li{
		& > div{
			width:calc(100% - 3.5rem);
			& > div{
				width:calc(100% - 3rem);
			}
		}
		h4{
			width: 3.5rem;
			text-align:right;
		}
		&:hover{
			.file{
				background:var(--primary);
				svg{
					path{
						fill:$white;
					}
				}
			}
		}
	}
	.fl-info{
		flex:1;
		span{
			font-size:0.8rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			display: block;
		}
	}
}
.contact-list{
	li{
		&:hover{

				img{
					filter: blur(1px);
				}
		}
	}
	
}
.chat-left-area{
	@include respond ('phone-land'){
		width: 22rem;
		position: absolute;
		left: -22rem;
		z-index: 2;
		@include transitionFast;
		&.active{
			left: 0rem;
		}
	}
}
.chat-right-area{
	.chat-rightarea-btn{
		display:none;
	}
	@include respond ('laptop'){
		width: 23rem;
		position: absolute;
		right: -16.5rem;
		@include transitionFast;
		&.active{
			right: 4.2rem;
		}
		.chat-rightarea-btn{
			position: absolute;
			top: 7rem;
			left: -1.1rem;
			width: 2.2rem;
			height: 3rem;
			background: var(--primary);
			display: inline-flex;
			color: #fff;
			font-size: 1.2rem;
			align-items: center;
			justify-content: center;
			border-radius: .5rem 0 0 .5rem;
			@include transitionFast;
			&.active{
				i{
					transform: rotateY(180deg);
				}
			}
		}
	}
	@include respond ('phone-land'){
		right: -22rem;
		&.active{
			right: -1.5rem;
		}
	}
}
.chat-mid-area{
	@include respond ('laptop'){
		flex: 1;
		overflow: hidden;
	}
	@include respond ('phone-land'){
		.chat-hamburger {
			display: flex;
			align-items: center;
			cursor:pointer;
			justify-content: center;	
			line-height: 45px;
			text-align: center;
			color: $white;
			border-radius: 50%;
			position:relative;
			span {
				display: block;
				height: 2px;
				margin: 2px auto;
				width: 20px;
				border-radius: 3px;
				background-color: var(--text-dark);
			}
		}
	}
}

// ---chat-content--
.chart-content {
    padding: 1rem;
	@include respond('tab-port'){
		padding-bottom: 0;
	}
	
	.media {
		.dz-media{
			width: 3rem;
			height: 3rem;
			min-width: 3rem;
			border-radius: $radius;
			overflow: hidden;
			margin-right: 0.625rem;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}


.chat-toggle{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    height:	2.5rem;
    width: 2.5rem;
    line-height: 2.2rem;
    text-align: center;
    color: $white;
    border-radius: $radius;
    position: relative;
    display: none;
	margin-right: 0.625rem;
	background-color: var(--rgba-primary-1);
    @include respond('phone-land'){
        display: flex;
    }
	svg{
		width: 25px;
		height: 25px;
		g{
			
			path{
				fill: var(--primary);
			}
		}
	}
	&::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: -50vw;
		width: 100vw;
		height: 100vh;
	}
    span{
        display: block;
        height: 2px;
        margin: 2px auto;
        width: 20px;
        border-radius: 3px;
        background-color: var(--text-dark);
    }
}
.chat-toggle.active{
	&::before{
		z-index: 1;
	}
}

.type-massage{
	background: var(--light);
	padding: 0.625rem;
	border-top:1px solid var(--border);
	border-radius: 0 0  $radius $radius;
	.input-group{
		textarea{
			border: 0;
			height: 3.4375rem !important;
			resize: none;
			padding: 1rem 0.9375rem;
			border-bottom: none;
			background: transparent;
			border-top-left-radius: $radius !important; 
			border-bottom-left-radius: $radius !important;
			overflow: hidden;
			white-space: nowrap;
			&:hover,
			&:focus{
				background: transparent;
			}
			@include respond ('phone'){
				height: 2.5rem !important;
				line-height: 1.5;
				padding: 0.4375rem 0.5rem;
			}
		}
	}
	.input-group{
		align-items:center;
	}
	&.style-1{
		border: 0;
		margin:0;
		padding: 0.375rem;
		background:rgba(219, 219, 219, 0.25);
		textarea{
			border: 0;
			height: 2.5rem !important;
			resize: none;
			padding: 0.0625rem 0.9375rem;
			background: transparent;
		}
	}
	.input-group-append{

			display: flex;
			align-items: center;		
		.btn{
			text-align:center;
			margin: 0 0.5rem;
			@include respond ('phone'){
				height:2.5rem;
				padding: 0 0.625rem;
				svg{
					width: 12px;
					height: 12px;
				}
			}
		}
	}
	.share-btn{
		
		svg{
			path{
				fill:var(--primary);
			}
		}
		
	}
	
}
// chat-modal
.chat-modal-bx{
	.modal{
		z-index: 1;
	}
	.message-received{
		p{
			background-color: var(--light)!important;
		}
	}
}