/* hide the original widget - that there were no two labels on the screen*/
#jivo_chat_widget{
	display: none;
}

/* the default style - for offline messages if no one is online */
#jivo_custom_widget{
	position: fixed;
	right: 1px;
	top: 76%;
	width: 92px;
	z-index: 300000;
	cursor: pointer;
	
	height: 100px;
	background-image: url(images/ifasturk-sohbet-balonu.png);
	
	-webkit-animation:float 2s linear infinite;
	animation:float 2s linear infinite;
}

/* when you hover the label should be shifted to the right by 3px */
#jivo_custom_widget:hover{
	top: 76%;
}

/* if there are operators online - show other label*/
#jivo_custom_widget.jivo_online{
	height: 100px;
	background-image: url(images/ifasturk-sohbet-balonu.png);
	background-position: center;
	background-size: cover;
}

#jivo_custom_widget::before,
#jivo_custom_widget::after{
	--scale: 0;
	--arrow-size: 10px;
	--tooltip-color: #000431;
	
	position: absolute;
	content: '';
	left: 50%;
	transform: translateX(-90%) translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 150ms transform;
	transform-origin:  bottom right;
}
#jivo_custom_widget::before{
	--translate-y: calc(-90% - var(--arrow-size));
	content: 'Merhaba ben E-BOT! Size yardımcı olmak için buradayım.';
	color: white;
	padding: .5em;
	border-radius: .9rem;
	text-align: center;
	width: 180px;
	background: var(--tooltip-color);
}
#jivo_custom_widget:hover::before,
#jivo_custom_widget:hover::after{
	--scale: 1;
}
#jivo_custom_widget::after{
	--translate-y: calc(-0.7 * var(--arrow-size));
	
	content: '';
	border: var(--arrow-size) solid transparent;
	border-top-color: #000431;
	transform-origin:  top center;
}

@-webkit-keyframes float
{
	0%
	{-webkit-transform:translateY(0);transform:translateY(0)}
	50%
	{-webkit-transform:translateY(10px);transform:translateY(10px)}
	100%
	{-webkit-transform:translateY(5px);transform:translateY(5px)}
}
@keyframes float
{
	0%
	{-webkit-transform:translateY(0);transform:translateY(0)}
	50%
	{-webkit-transform:translateY(10px);transform:translateY(10px)}
	100%
	{-webkit-transform:translateY(0);transform:translateY(0)}
}