.smileyPopup{
    position: absolute;
    width: 550px;
    height: 75px;
    top: 230px;
    right: 23px;
    background-color: white;
    border: 1px solid gray;
    padding: 10px;
    display: none;
}
.smileyPopup span{
    cursor: pointer;
}  
.smileyPopup td{padding:8px}
.popup{width:100%;height:100%;display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,0.75)}
.popup-inner{max-width:450px;height:500px;width:90%;padding:20px;position:absolute;top:300px;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,1);border-radius:3px;background:#fff}
.popup-close{color:#fff!important;width:30px;height:30px;padding-top:4px;display:inline-block;position:absolute;top:0;right:0;transition:ease .25s all;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);border-radius:1000px;background:rgba(0,0,0,0.8);font-family:Arial,Sans-Serif;font-size:20px;text-align:center;line-height:100%;color:#fff}
.popup-close:hover{-webkit-transform:translate(50%,-50%) rotate(180deg);transform:translate(50%,-50%) rotate(180deg);background:rgba(0,0,0,1);text-decoration:none}
#adops-footer-class{z-index:10000;bottom:0;position:fixed;margin:auto;left:50%;margin-left:calc(-728px/2)}
#closed img{width:42px;height:42px}
#closed{border:0;cursor:pointer;position:fixed;bottom:0;left:50%;margin-bottom:calc(100px - 24px);margin-left:calc(768px/2 - 24px);background-image:url(data:image/png;base64,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)}

.chat {
	position: relative;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	width: 24rem;
	height: 38rem;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 1rem;
	
	background: white;
	box-shadow: 
		0 0 8rem 0 rgba(black, 0.1),
		0rem 2rem 4rem -3rem rgba(black, 0.5);
	
	.contact.bar {
		flex-basis: 3.5rem;
		flex-shrink: 0;
		margin: 1rem;
		box-sizing: border-box;
	}
	
	.messages {
		padding: 1rem;
		background: $background;
		flex-shrink: 2;
		overflow-y: auto;
		
		box-shadow: 
			inset 0 2rem 2rem -2rem rgba(black, 0.05),
			inset 0 -2rem 2rem -2rem rgba(black, 0.05);
		
		.time {
			font-size: 0.8rem;
			background: $time-bg;
			padding: 0.25rem 1rem;
			border-radius: 2rem;
			color: $text-3;
			width: fit-content;
			margin: 0 auto;
		}
		
		.message {
			box-sizing: border-box;
			padding: 0.5rem 1rem;
			margin: 1rem;
			background: #FFF;
			border-radius: 1.125rem 1.125rem 1.125rem 0;
			min-height: 2.25rem;
			width: fit-content;
			max-width: 66%;
			
			box-shadow: 
				0 0 2rem rgba(black, 0.075),
				0rem 1rem 1rem -1rem rgba(black, 0.1);
			
			&.consulent {
				margin: 1rem 1rem 1rem auto ;
				border-radius: 1.125rem 1.125rem 0 1.125rem;
				background: $text-1;
				color: white;
			}
			
			.typing {
				display: inline-block;
				width: 0.8rem;
				height: 0.8rem;
				margin-right: 0rem;
				box-sizing: border-box;
				background: #ccc;
				border-radius: 50%;
				
				&.typing-1 { animation: typing 3s infinite }
				&.typing-2 { animation: typing 3s 250ms infinite }
				&.typing-3 { animation: typing 3s 500ms infinite }
			}
		}
	}
	
	.input {
		box-sizing: border-box;
		flex-basis: 4rem;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding: 0 0.5rem 0 1.5rem;
		
		i {
			font-size: 1.5rem;
			margin-right: 1rem;
			color: $text-2;
			cursor: pointer;
			transition: color 200ms;
			
			&:hover {
				color: $text-1;
			}
		}
		
		input {
			border:none;
			background-image:none;
			background-color: white;
			padding: 0.5rem 1rem;
			margin-right: 1rem;
			border-radius: 1.125rem;
			flex-grow: 2;
			box-shadow: 
				0 0 1rem rgba(black, 0.1),
				0rem 1rem 1rem -1rem rgba(black, 0.2);
			
			font-family: Red hat Display, sans-serif;
			font-weight: 400;
			letter-spacing: 0.025em;
			
			&:placeholder {
				color: $text-3;
			}
		}
	}
}


@keyframes typing {
	0%, 75%, 100% {
		transform: translate(0, 0.25rem) scale(0.9);
		opacity: 0.5;
	}
	
	25% {
		transform: translate(0, -0.25rem) scale(1);
		opacity: 1;
	}
}