.direct-chat.chat-pane-open .direct-chat-contacts{-webkit-transform:translate(0,0);transform:translate(0,0)}.direct-chat-messages{-webkit-transform:translate(0,0);transform:translate(0,0);padding:12px;height:250px;overflow:auto}.direct-chat-msg,.direct-chat-text{display:block}.direct-chat-msg{margin-bottom:10px}.direct-chat-msg::after{display:block;clear:both;content:""}.direct-chat-contacts,.direct-chat-messages{transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out}.direct-chat-text{border-radius:.3rem;position:relative;padding:5px 10px;background:#d2d6de;border:1px solid #d2d6de;margin:5px 0 0 50px;color:#444}.direct-chat-text:after,.direct-chat-text:before{position:absolute;right:100%;top:15px;border:solid transparent;border-right-color:#d2d6de;content:' ';height:0;width:0;pointer-events:none}.direct-chat-text.bg-danger:before,.direct-chat-text.bg-danger:after{border-right-color:#dc3545 !important;}.direct-chat-text:after{border-width:5px;margin-top:-5px}.direct-chat-text:before{border-width:6px;margin-top:-6px}.right .direct-chat-text{margin-right:50px;margin-left:0}.right .direct-chat-text:after,.right .direct-chat-text:before{right:auto;left:100%;border-right-color:transparent;border-left-color:#d2d6de}.direct-chat-img{border-radius:50%;float:left;width:40px;height:40px}.right .direct-chat-img{float:right}.direct-chat-info{display:block;margin-bottom:2px;font-size:.875rem}.direct-chat-name{font-weight:600}.direct-chat-timestamp{color:#999}.direct-chat-contacts-open .direct-chat-contacts{-webkit-transform:translate(0,0);transform:translate(0,0)}.direct-chat-contacts{-webkit-transform:translate(101%,0);transform:translate(101%,0);position:absolute;top:0;bottom:0;height:250px;width:100%;background:#222d32;color:#fff;overflow:auto}.contacts-list>li{border-bottom:1px solid rgba(0,0,0,.2);padding:10px;margin:0}.contacts-list>li::after{display:block;clear:both;content:""}.contacts-list>li:last-of-type{border-bottom:none}.contacts-list-img{border-radius:50%;width:40px;float:left}.contacts-list-info{margin-left:45px;color:#fff}.contacts-list-name,.contacts-list-status{display:block}.contacts-list-name{font-weight:600}.contacts-list-status{font-size:.875rem}.contacts-list-date{color:#aaa;font-weight:400}.contacts-list-msg{color:#999}.direct-chat-danger .right>.direct-chat-text{background:#dc3545;border-color:#dc3545;color:#fff}.direct-chat-danger .right>.direct-chat-text:after,.direct-chat-danger .right>.direct-chat-text:before{border-left-color:#dc3545}.direct-chat-primary .right>.direct-chat-text{background:#007bff;border-color:#007bff;color:#fff}.direct-chat-primary .right>.direct-chat-text:after,.direct-chat-primary .right>.direct-chat-text:before{border-left-color:#007bff}.direct-chat-warning .right>.direct-chat-text{background:#ffc107;border-color:#ffc107;color:#1f2d3d}.direct-chat-warning .right>.direct-chat-text:after,.direct-chat-warning .right>.direct-chat-text:before{border-left-color:#ffc107}.direct-chat-info .right>.direct-chat-text{background:#17a2b8;border-color:#17a2b8;color:#fff}.direct-chat-info .right>.direct-chat-text:after,.direct-chat-info .right>.direct-chat-text:before{border-left-color:#17a2b8}.direct-chat-success .right>.direct-chat-text{background:#28a745;border-color:#28a745;color:#fff}
		.fbottom
		{
			position: fixed;
			right: 15px;
			bottom: 0;
			width:370px;
			z-index:9999999999;		
		}
		.fbottom .icondiv
		{
			position: absolute;
			right: 15px;
			bottom: 20px;
			width:60px;
			height:60px;
		    border-radius: 50%;
			background-color: #004F9E;
			z-index:10500;		
		}
		
		.boot-vv {
    position: absolute;
   bottom:-10px;
    right: -10px;
    width: 80px;
    height: 80px;
    background: #004F9E;
    border-radius: 50% 50%;
    background-size: contain;
    z-index: 0;
    opacity: .5;
    animation: zoomIn .9s cubic-bezier(.47,0,.75,.72) infinite alternate;
}
		
	
		.boot-vv1 {
    position: absolute;
    
	bottom:-20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: #004F9E;
    border-radius: 50% 50%;
    background-size: contain;
    z-index: 0;
    opacity: .2;
    animation: zoomIn .6s cubic-bezier(.47,0,.75,.72) infinite alternate;
}




		.fbottom .faicon
		{
			color:#fff;
			font-size:20px;
			position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%,-50%);	
		}
		.fbottom input:focus
		{
			border-color: inherit;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		.fbottom .onlybot.card
		{
			box-shadow: 0 0 10px rgba(0,0,0,.18);
		}
		.fbottom .onlybot.card-header
		{
			background-color:#004F9E;
			color:#fff;
			padding: 12px;
			border-radius:8px 8px 0px 0px;
			z-index:1050;
		}
		.direct-chat .onlybot.card-body
		{
			position:relative;
			top: 0;
			overflow-x:hidden;
			background-color:#fff;
			padding:0;
			height:410px;
		}
		.fbottom .direct-chat-messages
		{
			position: absolute;
			top: 0px;
			width: 100%;
			height: 100%;
			background-color:#fff;
			overflow-y:scroll;
			padding:12px;
		}
		#botpanel 
		{
			padding: 12px;
			background-color:#fff;
			display: none;
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			overflow-y:auto;
		}
		.fbottom .onlybot.card-footer
		{
			height:63px;
			background-color:#fff;
			padding: 12px !important;
			border-radius:0px 0px 8px 8px;
			z-index:1050;
		}
		.fbottom .btn-primary
		{
			color: #fff;
			border-color: #004F9E;
			border-radius:25px;
			outline: 0;
			box-shadow: none;
		}
		.fbottom .btn-primary:hover
		{
			color: #fff;
			border-color: #004F9E;
			background-color:#004F9E;
			border-radius:25px
		}
		.fbottom .btn-success
		{
			color: #fff;
			border-color: #65BC54;
			border-radius:25px;
			outline: 0;
			box-shadow: none;
		}
		.fbottom .btn-success:hover
		{
			color: #fff;
			border-color: #65BC54;
			background-color:#65BC54;
			border-radius:25px
		}
		.fbottom .btn-danger
		{
			color: #fff;
			border-color: #dc3545;
			border-radius:25px;
			outline: 0;
			box-shadow: none;
		}
		.fbottom .btn-danger:hover
		{
			color: #fff;
			border-color: #dc3545;
			background-color:#dc3545;
			border-radius:25px
		}
		.fbottom .btn-info
		{
			color: #fff;
			border-color: #17a2b8;
			border-radius:25px;
			outline: 0;
			box-shadow: none;
		}
		.fbottom .btn-info:hover
		{
			color: #fff;
			border-color: #17a2b8;
			background-color:#17a2b8;
			border-radius:25px
		}
		.fbottom .btn:focus ,.fbottom .btn:active  ,.fbottom .btn:hover 
		{
			outline: 0;
			box-shadow: none;
		}
		.fbottom .btn:focus 
		{
			outline: 0;
			box-shadow: none;
		}
		.fbottom .badge-primary
		{
			background-color:#004F9E;
			color:#fff;
		}
		.btnblue
		{
			border-radius:50%;
			background-color:#004F9E;
			color:#fff;
		}
		@keyframes blink {
			0% {
			opacity: .2;
			}
			20% {
			opacity: 1;
			}
			100% {
			opacity: .2;
			}
		}
		.saving span {
			font-size:8px;
			animation-name: blink;
			animation-duration: 1.4s;
			animation-iteration-count: infinite;
			animation-fill-mode: both;
		}
		.saving span:nth-child(2) {
			animation-delay: .2s;
		}
		.saving span:nth-child(3) {
			animation-delay: .4s;
		}
		@media screen and (max-width: 480px) 
		{	
			.fbottom
			{
				position: fixed;
				right: 0;
				bottom: 0;
				width:100%;
			    background: #fff !important;
				z-index:9999999999;
			}
			.fbottom .onlybot.card-header
			{
				position: fixed;
				right: 0;
				left: 0;
				top: 0;
				border-radius:0px 0px 0px 0px;
				z-index:1050;
			}
			.fbottom .onlybot.card-body
			{
				position: fixed;
				top: 51px;
				width:100%;
				height: calc(100% - 114px);
			}
			.fbottom .onlybot.card-footer
			{
				height:63px;
				position: fixed;
				right: 0;
				left: 0;
				bottom: 0;
				border-radius:0px 0px 0px 0px;
				z-index:1050;
			}
			.fbottom #botexpand
			{
				visibility:hidden;
			}
		}
		.fbottom svg 
		{
			width: 25px;
			height: 36px;
			padding: 0;
			margin: 0;
			transition: fill .2s ease-in;
		}
		.send-button, .send-button:hover, .send-button:active 
		{
			fill: #004F9E;
		}
		.botfinishedtext
		{
			font-size: 13px !important;
			color: #8c8c8c !important;
			font-style: italic !important;
		}
		.botratingtext
		{
			font-size: 1.2em !important;
			color: #737171 !important;
		}
		#smileys input[type="radio"] {
			-webkit-appearance: none;
			width: 50px;
			height: 50px;
			border: none;
			cursor: pointer;
			transition: border .2s ease;
			filter: grayscale(100%);
			margin: 0 5px;
			transition: all .2s ease;
		}
		#smileys .sad:hover, #smileys .sad:checked 
		{			
			-webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
			filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
		}	
		#smileys .neutral:hover, #smileys .neutral:checked 
		{			
			-webkit-filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
			filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
		}	
		#smileys .happy:hover, #smileys .happy:checked 
		{			
			-webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
			filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
		}		
		#smileys input[type="radio"]:focus {
			outline: 0;
		}
		
		#smileys .happy {
			background: url('https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg') center;
			background-size: cover;
		}
		
		#smileys .neutral {
			background: url('https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg') center;
			background-size: cover;
		}
		#smileys .sad {
			background: url('https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg') center;
			background-size: cover;
		}
		.br-tl-tr-20
		{
			border-radius:20px 20px 0px 0px;
		}
		.fbottom .notbot.card-body ul
		{
			text-align:left !important;
			padding-left:15px !important;
		}
    .bgicon
    {
      background: #004F9E;
    }
    .f18
    {
      font-size: 18px;
    }
    .display-middle 
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }